intro a ember.js
DESCRIPTION
Intro a Ember.js Charla de Meetup.js Argentina, Julio 2014TRANSCRIPT
![Page 1: Intro a Ember.js](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/1.jpg)
Intro a Ember.js
Julio Olivera - @_joliv
![Page 2: Intro a Ember.js](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/2.jpg)
/#/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](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/3.jpg)
/#/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](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/4.jpg)
/#/controllersMusicPlayer.SongController = Ember.ObjectController.extend({! actions: {! saveComment: function(arguments) {! /* ... */! }! }!});!
MusicPlayer.CommentsController = Ember.ArrayController.extend({! sortProperties: ['createdAt'],! sortAscending: false!});!
![Page 5: Intro a Ember.js](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/5.jpg)
/#/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](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/6.jpg)
/#/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](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/7.jpg)
/#/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](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/8.jpg)
/#/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](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/9.jpg)
/#/bonus/ember-inspector
![Page 10: Intro a Ember.js](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/10.jpg)
/#/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](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/11.jpg)
/#/pending
• Views
• Testing
• Mixins
![Page 12: Intro a Ember.js](https://reader034.vdocuments.net/reader034/viewer/2022052321/554ba459b4c905b8618b4d91/html5/thumbnails/12.jpg)
¡Gracias!
¿Preguntas?