intro to knockout
DESCRIPTION
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-todoTRANSCRIPT
Intro to KnockoutJohn Maxwell
jQuery Spaghetti$usaMap = $("#usa-map") $worldMap = $("#world-map") activeMap = $worldMapsetActiveMap = (map) -> activeMap = mapanimateSwitchMaps = ($toShow, $toHide, animation) -> $toHide.hide(animation).promise().done -> $toShow.show(animation) switchMaps = ($toShow, $toHide) -> animateSwitchMaps($toShow, $toHide, 'puff') setActiveMap($toShow) # other stuffshowWorldMap = -> switchMaps $worldMap, $usaMapshowUsaMap = -> switchMaps $usaMap, $worldMap$usaMap.on 'click', '.international', showWorldMap$worldMap.on 'click', '.region.usa', showUsaMap
Where are we going?
• Knockout value proposition and comparison
• Knockout Basics
• Example walkthrough
Where are we going?
• Knockout value proposition and comparison!
• Knockout Basics
• Example walkthrough
If work with traditional web apps and want to want to add “islands of interactivity”, Knockout is a great option.
Knockout sales pitch• Declarative Bindings • Automatic UI Refresh • Dependency Tracking • Templating • Supports old browsers
What it doesn’t do
• Client-side routing / URL management
• Server synchronization
• Rigid conventions
Where are we going?
• Knockout value proposition and comparison!
• Knockout Basics
• Example walkthrough
Where are we going?
• Knockout value proposition and comparison
• Knockout Basics!
• Example walkthrough
MVVM Framework
• Model • View • ViewModel
The ViewModel
function AppViewModel() { this.firstName = "John"; this.lastName = "Maxwell"; } ko.applyBindings(new AppViewModel());
<p> First name: <strong data-bind="text: firstName"></strong></p><p> Last name: <strong data-bind="text: lastName"></strong></p>
The View
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>
View Model Revisited
function AppViewModel() { this.firstName = "John"; this.lastName = "Maxwell"; } ko.applyBindings(new AppViewModel());
Observables
function AppViewModel() { this.firstName = ko.observable("John"); this.lastName = ko.observable("Maxwell"); } ko.applyBindings(new AppViewModel());
Observable interactionfunction 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"
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>
Where are we going?
• Knockout value proposition and comparison
• Knockout Basics!
• Example walkthrough
Where are we going?
• Knockout value proposition and comparison
• Knockout Basics
• Example walkthrough
Todo list application• Load existing todos from localStorage
• Edit existing todos
• Add new todos
• Save todos to localStorage
• Remove individual todos
• Clear all todos
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
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
Extra resources
• http://learn.knockoutjs.com/
• https://github.com/johnmaxwell/knockout-todo
• Twitter: @greenagain
• http://agileleague.com/