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

1. Intro a Ember.js
Julio Olivera - @_joliv

2. /#/routing
window.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 😡

3. /#/routes
MusicPlayer.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);!
});!
}!
});!

4. /#/controllers
MusicPlayer.SongController = Ember.ObjectController.extend({!
actions: {!
saveComment: function(arguments) {!
/* ... */!
}!
}!
});!
MusicPlayer.CommentsController = Ember.ArrayController.extend({!
sortProperties: ['createdAt'],!
sortAscending: false!
});!

5. /#/objects
MusicPlayer.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'!

6. /#/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>!

7. /#/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')!
});!

8. /#/ember-data
MusicPlayer.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 })!
});!

9. /#/bonus/ember-inspector

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

11. /#/pending
• Views
• Testing
• Mixins

12. ¡Gracias!
¿Preguntas?