7. MVC WorkďŹow
User
NotiďŹes
Model action
View
Updates
Controller Updates
⢠Tracks the appâs state
Router ⢠Affects the applicationâs view hierarchy
⢠Mediates between the MVC components
Serialize
URL Usable app state
Deserialize
7
10. Ember.Object
⢠Enhanced JavaScript object model
⢠Computed Properties (synthetizes
properties)
⢠Observers (reacts to changes)
⢠Bindings (syncs objects)
Always access properties
using get and set
10
11. Ember.Object
var App = Ember.Application.create();
App.Person = Em.Object.extend({
firstName: null,
lastName: null,
fullName: function(){
return this.get('firstName') + " " + this.get('lastName');
}.property('firstName', 'lastName')
}); Computed Property
var john = App.Person.create({
firstName: "John",
lastName: "Doe"
});
john.get("fullName"); // John Doe
What about computed property for arrays, hĂŁn?
femalesCount: function() {
http://jsďŹddle.net/cBWsr/2/ var people = this.get('people');
return people.filterProperty('isFemale', true).
get('length');
}.property('people.@each.isFemale')
11
12. Ember.Object
var App = Ember.Application.create();
App.Person = Em.Object.extend({
login: null,
firstName: null,
changedFirstName: function(){
this.set('login', this.get('firstName').toLowerCase());
}.observes('firstName')
}); Observer
var john = App.Person.create();
john.set('firstName', 'John');
john.get("login"); // john
http://jsďŹddle.net/X7QBU/3/
12
18. Time for Dojo
⢠Scrum board
⢠Stories and tasks (executed by a person)
⢠I want to create stories (tasks)
⢠I want to edit stories (tasks)
⢠I want to delete stories (tasks)
⢠I want to assign a task for me
⢠No server integration (for now)
Next dev-day /o/
(ember-data)
18
19. Time for Dojo
⢠Spoiler: http://jsďŹddle.net/37YMc/2/
19
21. Router
⢠Maps URLs to states and vice versa
⢠Preferred for building large apps
⢠Can link views based on the state
⢠Loves name conventions
21
25. C for Controller
⢠Controller simple controller
⢠ObjectController support to manipulate
an Object
⢠ArrayController support to manipulate a
collection
25
26. C for Controller
Accessing the content
App.ContactController = Em.ObjectController.extend({
someProperty: 'cool-value',
destroyRecord: function() {
this.get('content').destroy();
}
});
pushing a object to a controllerâs collection
App.ContactsController = Em.ArrayController.extend({
createContact: function(name) {
push
var contact = App.Contact.create({ name: name });
this.pushObject(contact);
},
});
Remember that all
bindingâs magic apply to
Controllers
26
28. V for View
⢠Always associated with a template
⢠Your friend when dealing with browser
events
⢠touch (touchStart), keyboard (keyDown),
mouse (mouseDown), form (submit), drag
and drop (dragStart),
28