Intro to Knockout

524 views

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
524
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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/

×