✔Do Something
native change handler
set isDone = true on object
object change handler
recalculate remaining & update DOM
Slide 47
Slide 47 text
native change handler
set isDone = true on object
object change handler
recalculate remaining & update DOM
set isDone = true on object
object change handler
recalculate remaining & update DOM
set isDone = true on object
object change handler
recalculate remaining & update DOM
set isDone = true on object
object change handler
recalculate remaining & update DOM
Slide 48
Slide 48 text
native change handler
set isDone = true on object
object change handler
recalculate remaining & update DOM
set isDone = true on object
object change handler
recalculate remaining & update DOM
set isDone = true on object
object change handler
recalculate remaining & update DOM
set isDone = true on object
object change handler
recalculate remaining & update DOM
Slide 49
Slide 49 text
Solution:
Flag
Slide 50
Slide 50 text
list.bind('change', function() {
if(!list.bulk) {
var remaining = list.remaining();
var text = remaining + ' remaining';
$("#stats").html(text);
}
});
$(todo).bind('changeData', function(e, name) {
if (name === 'isDone') {
var todo = $(this);
var check = todo.data('element');
check.attr(checked, todo.isDone);
var ul = check.closest('ul');
var list = ul.data('list');
list.triggerLater('change');
}
});
start native handlers
triggerLater calls
end native handlers
"triggerLater" semantics
Slide 64
Slide 64 text
start native handlers
triggerLater calls
end native handlers
execute triggerLater once
"triggerLater" semantics
Slide 65
Slide 65 text
native change handler
set isDone = true on object
object change handler
triggerLater list change
set isDone = true on object
object change handler
triggerLater list change
set isDone = true on object
object change handler
triggerLater list change
set isDone = true on object
object change handler
triggerLater list change
Slide 66
Slide 66 text
native change handler
set isDone = true on object
object change handler
triggerLater list change
set isDone = true on object
object change handler
triggerLater list change
set isDone = true on object
object change handler
triggerLater list change
set isDone = true on object
object change handler
triggerLater list change
Checkbox
{{view SC.Checkbox
valueBinding="Todos.todoListController.allAreDone"}}
Mark All as Done
Slide 109
Slide 109 text
You:
Declare
Linkage
Slide 110
Slide 110 text
SproutCore:
Keep Layers
in Sync
Slide 111
Slide 111 text
Buffered
Between
Layers
"Buffered Between
Layers"
Changes to the model
layer for a particular
event can all be made
before they are
propagated to the
controller or view.
Slide 112
Slide 112 text
How Does it
Work?
Slide 113
Slide 113 text
Properties
Slide 114
Slide 114 text
Properties
ArrayController
Slide 115
Slide 115 text
Properties
ArrayController
allAreDone
Slide 116
Slide 116 text
While Handling Events
ArrayController
allAreDone dirty?
This flag is automatically set by
SproutCore if the property or any
of its dependencies change.
Slide 117
Slide 117 text
While Handling Events
ArrayController
allAreDone dirty?
✔
This flag is automatically set by
SproutCore if the property or any
of its dependencies change.
{{#view Todos.ClearCompletedView}}
Clear Completed Todos
{{/view}}
{{displayRemaining}} remaining.
{{/view}}
Slide 128
Slide 128 text
{{view SC.Checkbox valueBinding=
"Todos.todoListController.allAreDone"}}
Mark All as Done
{{#each Todos.todoListController
itemClassBinding="isDone"}}
{{view SC.Checkbox valueBinding=
"parentView.content.isDone"}}
{{content.title}}
{{/each}}
Slide 129
Slide 129 text
Declare
Bindings in
Template
Slide 130
Slide 130 text
Handle
Events in
SC.View
Slide 131
Slide 131 text
Magic
Slide 132
Slide 132 text
Where does
jQuery Fit
In?
Slide 133
Slide 133 text
Model
Controller
View
Slide 134
Slide 134 text
Model
Controller
jQuery
Slide 135
Slide 135 text
Mark All Done
✔
when allAreDone changes in the controller
Slide 136
Slide 136 text
Mark All Done
✔
later...
Slide 137
Slide 137 text
Mark All Done
✔
DOM
DOM
Todos.AllDoneView
view object is notified
Slide 138
Slide 138 text
SC Views Manipulate DOM With jQuery
this.$('input').attr('checked', val);
Slide 139
Slide 139 text
SC Views Manipulate DOM With jQuery
SC.Checkbox = SC.View.extend({
value: function(key, value) {
if(value !== undefined) {
this.$('input').attr('checked', value);
} else {
value = this.$('input').attr('checked');
}
return value;
}.property()
});
Slide 140
Slide 140 text
Define
Properties
Slide 141
Slide 141 text
Define
Linkage
Slide 142
Slide 142 text
Define a Value Binding
{{view SC.Checkbox
valueBinding="Todos.todoListController.allAreDone"}}
Mark All as Done
Slide 143
Slide 143 text
There is No
Step 3
Slide 144
Slide 144 text
To Recap
Slide 145
Slide 145 text
Automatic
Sync of App
State
Slide 146
Slide 146 text
Batches
Intermediate
State
SproutCore automatically handles
batching changes to avoid the
intermediate state problem
Slide 147
Slide 147 text
(buffered
sync between
layers)
Slide 148
Slide 148 text
Uniform
Object
Model
The SproutCore Object Model wraps all
of this up in a consistent, well-defined
way to declare object relationships
Slide 149
Slide 149 text
Data Store
The SproutCore data store takes advantage
of the declarative nature of SproutCore to
let you lazily populate Arrays
asynchronously. API TO BE IMPROVED