12. Controller
View to Model
Interaction
One Direction
View Model
User Interaction Data
HTML Business Logic
DB Interaction
Observer
Pattern
13. 2 View alerts
Controller Controller Updates Model
controller of 3
particular
event
4 Model alerts view that
it has changed.
View Model
5 View grabs model data
1 User interacts and updates itself.
with a view
14. 2 View alerts
Controller Controller Updates Model
controller of 3
particular
event
View 1 Model
4 Model alerts
view that it has
changed.
1 User interacts
with a view
View 2 5 View grabs model data
and updates itself.
15. Controller
View to Model
Interaction
One Direction
View Model
User Interaction Data
HTML Business Logic
DB Interaction
Observer
Pattern
21. Controller
View-Model
Interaction
One Direction
View Model
User Interaction Data
HTML Business Logic
DB Interaction
Observer
Pattern
22. Lame Real-world Analogy
1 “If little Billy gets hurt,
I want you to call this
number immediately.”
Mother Babysitter
2 Little Billy breaks his
arm while ice-skating,
so babysitter calls the
supplied number.
23. Observer and Subject
1 “If this thing I care
about happens,
call this function.”
Observer Subject
2 The things happens,
so the subject calls
the function.
25. View-Model Relationship
1 “If this certain data
changes, call my
function view.foo().
View Model
(Observer) (Subject)
2 The change happens, 3 The view grabs the
so the model calls changed data from the
view.foo(). model and updates
itself.
26. Observer Pattern – Basic Use
3 view.prototype.render = function(){
//grab model data and update view html
}
/*
* view tells model that if “change” happens,
* then call view’s render function
*/
1 model.subscribe(“change”,view.render);
/*
* The “change” happens, so the model alerts
* any observers of “change”
*/
2 model.notify(“change”);
27. Observer Pattern -- Internals
var events = [
{“abitraryString1” : [function1, function2] },
//model.notify(“arbitraryString2”) would
//cause function2 and function3 to be called.
{“abritraryString2” : [function2, function3] },
//model.subscribe(“arbitraryString3”,function4)
//would add function4 to this list
{“abritraryString3” : [function3] },
//model.subscribe(“arbitraryString4”,function1)
//would add a new member to the events array
];
34. • Classes for the separate concerns of
Models, Views, and Controllers
• Observer Pattern built-in
• Templating built-in
• Event Delegation built-in
• Small -- 4.6kb, compressed
35. “It's all too easy to create
JavaScript applications that end
up as tangled piles of jQuery
selectors and callbacks, all trying
frantically to keep data in sync
between the HTML UI, your
JavaScript logic, and the database
on your server.”
Jeremy Ashkenas, Creator of Backbone.js