Download as PDF, PPTX
![View
App.PersonView = Ember.View.extend({
classNamesBindings: ['active', 'selected'],
click: function() {
this.get('controller').send('clearName');
}
});](https://image.slidesharecdn.com/ember-talk-may-14th-140529131813-phpapp01/85/Ember-js-for-Big-Profit-35-320.jpg)
Uploaded byCodeCore
Ember.js for Big Profit
This document discusses Ember.js, focusing on its features like performance, caching, and developer ergonomics. It covers the MVC architecture, explaining how Ember manages data and state through models, views, and controllers while utilizing URLs for routing. The document also includes code examples and references to further resources for learning Ember.js.
More Related Content
Similar to Ember.js for Big Profit
Ember.js for Big Profit
- 1.
- 3.
- 4.
- 5. What This TalkIsn’t Ember vs Angular
- 6.
- 7.
- 8.
- 9. More requests persecond
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 21. What is Ember? TheBasics
- 22. What Does EmberDo? ● History management (URL / Router) ● Developer ergonomics ● Easy, fast, two-way binding ● Views built in HTML (Handlebars) ● Ember data
- 23.
- 24. Convention > Configuration this.resource('person',{ path: '/person'}); App.Person = Ember.Object.extend(); App.PersonRoute = Ember.Route.extend(); App.PersonController = Ember.ObjectController.extend(); App.PersonView = Ember.View.extend(); person.hbs
- 25. One Source ofTruth
- 26. One Source ofTruth function ajaxCall() { $.ajax({ url: 'http://example/com/api-endpoint', }) .done(function(data) { $('#some-element').append('<div class="child-element-name"'> + data.name + '</div><div class="child-element-count">' + data.count + '</div>'); }); }
- 27.
- 28.
- 29. ● Wikipedia: consistsof application data, business rules, logic and functions ● Ember: properties and behaviour of data presented to user ● Ember: anything requiring persistence should be in a model Model
- 30. View ● Wikipedia: aview can be any representation of information ● Ember: handles complex user interactions ● essentially any of the UI elements you see on the screen
- 31. Controller ● Wikipedia: acceptsinput and converts it to commands for the model or view ● Ember: decorate your models with display logic ● Ember: generally handles state that doesn’t need to be persisted
- 32. MVC /post → showall posts /post/new → create new post /post/1 → show post with ID of 1 /post/1/edit → edit post with ID of 1
- 33. Model App.Person = Ember.Object.create({ firstName:null, lastName: null }); var person = App.Person.create({ firstName: ‘Paul’, lastName: ‘Ruescher’ });
- 34. View ● handlebars ● boundproperties Coming Soon: http://talks.erikbryn.com/htmlbars/#
- 35. View App.PersonView = Ember.View.extend({ classNamesBindings:['active', 'selected'], click: function() { this.get('controller').send('clearName'); } });
- 36. View - Template <h2>{{title}}</h2> {{#eachitem in controller}} {{input value=item.firstName}} {{input value=item.lastName}} <h2>{{item.fullName}}</h2> {{/each}}
- 37. Controller App.Person = Ember.Object.create({ firstName:null, lastName: null }); App.PersonController = Ember.ObjectController.extend({ fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName'); });
- 38. Controller App.PersonController = Ember.ObjectController.extend({ actions:{ clearName: function() { this.setProperties({ firstName: null, lastName: null }); } } });
- 39.
- 40. ● helps managestate as users interact with your app ● the router is responsible for displaying templates and loading data ● does this by matching the URL to the routes you define Router
- 41. Router /post → showall posts /post/new → create new post /post/1 → show post with ID of 1 /post/1/edit → edit post with ID of 1
- 42. Router App.Router.map(function(){ this.resource('posts', { path:'/post/' }, function() { this.route('new'); this.resource('post', { path: '/:post_id' }, function() { this.route('edit'); }); }); });
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.