Your SlideShare is downloading. ×
0
Intro to Knockout
John Maxwell
jQuery Spaghetti
$usaMap = $("#usa-map")

$worldMap = $("#world-map")




activeMap = $worldMap

setActiveMap = (map) ->

...
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 ...
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...
The View
<p>

First name: 

<strong data-bind="text: firstName"></strong>

</p>

<p>

Last name:

<strong data-bind="text:...
Two-way Binding




<p>

First name: 

<strong data-bind="text: firstName"></strong>

</p>

<p>

Last name:

<strong data-...
View Model Revisited




function AppViewModel() {

this.firstName = "John";

this.lastName = "Maxwell";

}

ko.applyBindi...
Observables




function AppViewModel() {

this.firstName = ko.observable("John");

this.lastName = ko.observable("Maxwell...
Observable interaction




function AppViewModel() {

this.firstName = ko.observable("John");

this.lastName = ko.observab...
Two-way Binding
<p>

First name: 

<strong data-bind="text: firstName"></strong>

</p>

<p>

Last name:

<strong data-bind...
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...
Walkthrough Primer
•

TodoList is our ViewModel for managing an array of
Todo Models

•

ObservableArrays are like Observa...
Other useful bindings
•

css: Adds/removes class on element

•

attr: Adds/removes attributes of an element

•

disable/en...
Extra resources
•

http://learn.knockoutjs.com/

•

https://github.com/johnmaxwell/knockout-todo

•

Twitter: @greenagain
...
Intro to Knockout
Upcoming SlideShare
Loading in...5
×

Intro to Knockout

238

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
238
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to Knockout"

  1. 1. Intro to Knockout John Maxwell
  2. 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. 3. Where are we going? • Knockout value proposition and comparison • Knockout Basics • Example walkthrough
  4. 4. Where are we going? • Knockout value proposition and comparison! • Knockout Basics • Example walkthrough
  5. 5. If work with traditional web apps and want to want to add “islands of interactivity”, Knockout is a great option.
  6. 6. Knockout sales pitch • Declarative Bindings • Automatic UI Refresh • Dependency Tracking • Templating • Supports old browsers
  7. 7. What it doesn’t do • Client-side routing / URL management • Server synchronization • Rigid conventions
  8. 8. Where are we going? • Knockout value proposition and comparison! • Knockout Basics • Example walkthrough
  9. 9. Where are we going? • Knockout value proposition and comparison • Knockout Basics! • Example walkthrough
  10. 10. MVVM Framework • Model • View • ViewModel
  11. 11. The ViewModel 
 function AppViewModel() {
 this.firstName = "John";
 this.lastName = "Maxwell";
 }
 ko.applyBindings(new AppViewModel());
  12. 12. The View <p>
 First name: 
 <strong data-bind="text: firstName"></strong>
 </p>
 <p>
 Last name:
 <strong data-bind="text: lastName"></strong>
 </p>

  13. 13. 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>
  14. 14. View Model Revisited 
 function AppViewModel() {
 this.firstName = "John";
 this.lastName = "Maxwell";
 }
 ko.applyBindings(new AppViewModel());
  15. 15. Observables 
 function AppViewModel() {
 this.firstName = ko.observable("John");
 this.lastName = ko.observable("Maxwell");
 }
 ko.applyBindings(new AppViewModel());
  16. 16. 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"
  17. 17. 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>
  18. 18. Where are we going? • Knockout value proposition and comparison • Knockout Basics! • Example walkthrough
  19. 19. Where are we going? • Knockout value proposition and comparison • Knockout Basics • Example walkthrough
  20. 20. Todo list application • Load existing todos from localStorage • Edit existing todos • Add new todos • Save todos to localStorage • Remove individual todos • Clear all todos
  21. 21. 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
  22. 22. 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
  23. 23. Extra resources • http://learn.knockoutjs.com/ • https://github.com/johnmaxwell/knockout-todo • Twitter: @greenagain • http://agileleague.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×