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/