Intro a Ember.js

Introducción a Ember.js para la meetup de julio 2014 en Meetup.js Buenos Aires
http://www.meetup.com/Meetup-js/events/191621332/

Transcript

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?