Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Client Side Applications with Ember.js

Client Side Applications with Ember.js

Hack Harvard 2013

Christopher Meiklejohn

January 20, 2013
Tweet

More Decks by Christopher Meiklejohn

Other Decks in Programming

Transcript

  1. App.Person = Ember.Object.extend({ say: function(thing) { alert(thing); } }); var

    person = App.Person.create(); person.say("Hello Joe."); Sunday, January 20, 13
  2. App.Editable = Ember.Mixin.create({ edit: function() { this.set('isEditing', true); }, isEditing:

    false }); App.CommentView = Ember.View.extend( App.Editable, { template: Ember.Handlebars.compile('...') }); Sunday, January 20, 13
  3. App.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() {

    return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.get('fullName'); Sunday, January 20, 13
  4. App.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() {

    return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.get('fullName'); Sunday, January 20, 13
  5. App.president = Ember.Object.create({ firstName: "George W.", lastName: "Bush", fullName: function()

    { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.set('firstName', 'Barack'); App.president.set('lastName', 'Obama'); Sunday, January 20, 13
  6. <div class="navbar" style="margin-bottom:0"> <div class="navbar-inner"> <a class="brand" href="#">GiddyUp</a> {{outlet projects}}

    </div> </div> {{outlet scorecards}} {{outlet testResults}} {{outlet scorecard}} Sunday, January 20, 13
  7. 1. Initialize route, controller and view 2. Load model 3.

    Initialize with controllers 3. Render template Sunday, January 20, 13
  8. 1. call create(); 2. call model(); 3. call setupControllers(); 3.

    call renderTemplate(); Sunday, January 20, 13
  9. GiddyUp.Router.map(function() { this.resource('projects', function() { this.route('show', { path: '/:project_id'); });

    }); /** IndexRoute ProjectsRoute (Projects)IndexRoute (Projects)ShowRoute **/ Sunday, January 20, 13
  10. GiddyUp.ProjectsRoute = Ember.Route.extend({ model: function() { return GiddyUp.Project.find(); }, setupController:

    function(c, projects) { c.set('content', projects); }, renderTemplate: function() { this.render('projects', { outlet: 'projects' }); } }); Sunday, January 20, 13
  11. GiddyUp.ProjectsShowRoute = Em.Route.extend({ model: function() { return GiddyUp.Project.find( params.project_id); },

    setupController: function(c, project) { c.set('content', project); } }); Sunday, January 20, 13
  12. GiddyUp.ProjectsRoute = Ember.Route.extend({ events: { show: function() { alert('cool story,

    bro'); } } }); GiddyUp.ProjectsView = Ember.View.extend({ show: function() { alert('cool story, bro'); } }); GiddyUp.ProjectsController = Ember.ArrayController.extend({ show: function() { alert('cool story, bro'); } }); Sunday, January 20, 13
  13. App.Person = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), birthday: DS.attr('date'), children:

    DS.hasMany('App.Child'), fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); var person = App.Person.find(1); Sunday, January 20, 13