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
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