Intro a Ember.js
-
Upload
julio-olivera -
Category
Software
-
view
147 -
download
0
description
Transcript of Intro a Ember.js
Intro a Ember.js
Julio Olivera - @_joliv
/#/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 😡
/#/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);! });! }!});!
/#/controllersMusicPlayer.SongController = Ember.ObjectController.extend({! actions: {! saveComment: function(arguments) {! /* ... */! }! }!});!
MusicPlayer.CommentsController = Ember.ArrayController.extend({! sortProperties: ['createdAt'],! sortAscending: false!});!
/#/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'!
/#/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>!
/#/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')!});!
/#/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 })!});!
/#/bonus/ember-inspector
/#/bonus/embedded-ember
window.MusicPlayer = Ember.Application.create({! rootElement: '#music-player-app'!});!!MusicPlayer.Router = Ember.Router.extend({! location: 'none'!});!
/#/pending
• Views
• Testing
• Mixins
¡Gracias!
¿Preguntas?