12
Intro a Ember.js Julio Olivera - @_joliv

Intro a Ember.js

Embed Size (px)

DESCRIPTION

Intro a Ember.js Charla de Meetup.js Argentina, Julio 2014

Citation preview

Page 1: Intro a Ember.js

Intro a Ember.js

Julio Olivera - @_joliv

Page 2: Intro a Ember.js

/#/routingwindow.MusicPlayer = Ember.Application.create();!!MusicPlayer.Router.map(function() {! this.resource('song', { path: '/song/:song_id'});!});!!MusicPlayer.SongRoute = Ember.Route.extend({});!!MusicPlayer.SongController = Ember.ObjectController.extend({});!!<script type="text/x-handlebars" data-template-name="song">! {{outlet}}!</script>

/#/song/1/#/song/1?startAt=120 😡

Page 3: Intro a Ember.js

/#/routesMusicPlayer.SongRoute = Ember.Route.extend({! model: function() {! return { name: 'Spiritual Groove', artist: 'Antoine Dufour' };! }!});!!MusicPlayer.ArtistRoute = Ember.Route.extend({! model: function() {! return new Ember.RSVP.Promise(function(resolve, reject) {! doSomethingAsync(resolve);! });! }!});!

Page 4: Intro a Ember.js

/#/controllersMusicPlayer.SongController = Ember.ObjectController.extend({! actions: {! saveComment: function(arguments) {! /* ... */! }! }!});!

MusicPlayer.CommentsController = Ember.ArrayController.extend({! sortProperties: ['createdAt'],! sortAscending: false!});!

Page 5: Intro a Ember.js

/#/objectsMusicPlayer.Song = Ember.Object.extend({! length: 0,! duration: function() {! var length = this.get('length'),! seconds = length % 60,! minutes = Math.floor(length / 60),! duration = '';!! if (seconds < 10) {! seconds = '0' + seconds;! }!! return duration + minutes + ':' + seconds;! }.property('length')!});!!var song = MusicPlayer.Song.create();!song.get('duration'); // '0:00'!song.set('length', 119);!song.get('duration'); // '1:59'!

Page 6: Intro a Ember.js

/#/templates<script type="text/x-handlebars" data-template-name="song">! <div>! <h2>{{name}}</h2>! <h3>{{#link-to 'artist' artist}}{{artist.name}}{{/link-to}}</h3>!! <div class="song-player--cover">! {{cover-art mbid=mbid}}! </div>!! <audio controls {{bind-attr src=path}}></audio>! </div>!</script>!

Page 7: Intro a Ember.js

/#/components

<script type="text/x-handlebars" data-template-name="components/cover-art">! <img {{bind-attr src=coverArtPath}}/>!</script>!

MusicPlayer.CoverArtComponent = Ember.Component.extend({! coverArtPath: function() {! return 'http://coverartarchive.org/release/' +! this.get('mbid') +! '/front-500';! }.property('mbid')!});!

Page 8: Intro a Ember.js

/#/ember-dataMusicPlayer.Song = DS.Model.extend({! name: DS.attr('string'),! artist: DS.belongsTo('artist'),! path: DS.attr('string'),! mbid: DS.attr('string'),! comments: DS.hasMany('comment', { async: true })!});!

MusicPlayer.Artist = DS.Model.extend({! name: DS.attr('string'),! songs: DS.hasMany('song', { async: true })!});!

Page 9: Intro a Ember.js

/#/bonus/ember-inspector

Page 10: Intro a Ember.js

/#/bonus/embedded-ember

window.MusicPlayer = Ember.Application.create({! rootElement: '#music-player-app'!});!!MusicPlayer.Router = Ember.Router.extend({! location: 'none'!});!

Page 11: Intro a Ember.js

/#/pending

• Views

• Testing

• Mixins

Page 12: Intro a Ember.js

¡Gracias!

¿Preguntas?