The last portion of the presentation contains a walkthrough of a todo code project. The repo for that code can be found: https://github.com/johnmaxwell/knockout-todo

1. Intro to Knockout
John Maxwell

2. jQuery Spaghetti
$usaMap = $("#usa-map")
$worldMap = $("#world-map")
activeMap = $worldMap
setActiveMap = (map) ->
activeMap = map
animateSwitchMaps = ($toShow, $toHide, animation) ->
$toHide.hide(animation).promise().done -> $toShow.show(animation)
switchMaps = ($toShow, $toHide) ->
animateSwitchMaps($toShow, $toHide, 'puff')
setActiveMap($toShow)
# other stuff
showWorldMap = ->
switchMaps $worldMap, $usaMap
showUsaMap = ->
switchMaps $usaMap, $worldMap
$usaMap.on 'click', '.international', showWorldMap
$worldMap.on 'click', '.region.usa', showUsaMap

3. Where are we going?
•
Knockout value proposition
and comparison
•
Knockout Basics
•
Example walkthrough

4. Where are we going?
•
Knockout value proposition
and comparison!
•
Knockout Basics
•
Example walkthrough

5. If work with traditional
web apps and want to
want to add “islands of
interactivity”, Knockout
is a great option.

7. Knockout sales pitch
•
Declarative Bindings
•
Automatic UI Refresh
•
Dependency Tracking
•
Templating
•
Supports old browsers

8. What it doesn’t do
•
Client-side routing / URL
management
•
Server synchronization
•
Rigid conventions

9. Where are we going?
•
Knockout value proposition
and comparison!
•
Knockout Basics
•
Example walkthrough

10. Where are we going?
•
Knockout value proposition
and comparison
•
Knockout Basics!
•
Example walkthrough

11. MVVM Framework
•
Model
•
View
•
ViewModel

12. The ViewModel
function AppViewModel() {
this.firstName = "John";
this.lastName = "Maxwell";
}
ko.applyBindings(new AppViewModel());

13. The View
<p>
First name:
<strong data-bind="text: firstName"></strong>
</p>
<p>
Last name:
<strong data-bind="text: lastName"></strong>
</p>

14. Two-way Binding
<p>
First name:
<strong data-bind="text: firstName"></strong>
</p>
<p>
Last name:
<strong data-bind="text: lastName"></strong>
</p>
<p>
First name:
<input data-bind="value: firstName" />
</p>
<p>
Last name:
<input data-bind="value: lastName" />
</p>

15. View Model Revisited
function AppViewModel() {
this.firstName = "John";
this.lastName = "Maxwell";
}
ko.applyBindings(new AppViewModel());

16. Observables
function AppViewModel() {
this.firstName = ko.observable("John");
this.lastName = ko.observable("Maxwell");
}
ko.applyBindings(new AppViewModel());

17. Observable interaction
function AppViewModel() {
this.firstName = ko.observable("John");
this.lastName = ko.observable("Maxwell");
}
var viewModel = new AppViewModel();
viewModel.firstName(); // "John"
viewModel.firstName("Silver Hammer");
viewModel.firstName(); // "Silver Hammer"

18. Two-way Binding
<p>
First name:
<strong data-bind="text: firstName"></strong>
</p>
<p>
Last name:
<strong data-bind="text: lastName"></strong>
</p>
<p>
First name:
<input data-bind="value: firstName" />
</p>
<p>
Last name:
<input data-bind="value: lastName" />
</p>

19. Where are we going?
•
Knockout value proposition
and comparison
•
Knockout Basics!
•
Example walkthrough

20. Where are we going?
•
Knockout value proposition
and comparison
•
Knockout Basics
•
Example walkthrough

21. Todo list application
•
Load existing todos from localStorage
•
Edit existing todos
•
Add new todos
•
Save todos to localStorage
•
Remove individual todos
•
Clear all todos

22. Walkthrough Primer
•
TodoList is our ViewModel for managing an array of
Todo Models
•
ObservableArrays are like Observables, with some extra
support for managing collections
•
foreach is a binding that iterates over ObservableArrays
•
foreach shifts the binding context to elements of the
ObservableArray
•
Binding values can be arbitrary JavaScript expressions

23. Other useful bindings
•
css: Adds/removes class on element
•
attr: Adds/removes attributes of an element
•
disable/enable: Disables/enables form inputs
•
options: Adds/removes options in select box

24. Extra resources
•
http://learn.knockoutjs.com/
•
https://github.com/johnmaxwell/knockout-todo
•
Twitter: @greenagain
•
http://agileleague.com/