Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Knockout js

512 views

Published on

Introduction to KnockoutJS

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Knockout js

  1. 1. KnockoutJS James Chen
  2. 2. Intro  What is KnockoutJS?  JavaScript Library  Build web UIs with model-view-viewmodel(MVVM) pattern  Uses Declarative bindings to connect UI to data  Dependency tracking to automatically update UI when data changes
  3. 3. Views & Viewmodel  View  Html  Viewmodel  JavaScript file  Written as functions  Ex: function UserVM() { this.name = “James”; this.age = “5”; }
  4. 4. Bindings  Add data-bind attribute to html tag  EX: <span data-bind=“text: name”></span>  Text & appearance bindings  Visible, text, html, css, style, attr  Control flow  Foreach, if, ifnot, with, component  Form fields  Click, event, submit, enable, disable, value, textinput, hasfocus, checked, etc  Rendering templates  Template
  5. 5. Observables  setting a property in a viewmodel as observable will issue notifications whenever their values change  this change then can be reflected to views that has data bound to these properties  ex: function AppViewModel() { this.firstName = ko.observable("Bert"); this.lastName = ko.observable("Bertington“); }
  6. 6. Computed values  allows for the combination or conversion of multiple observable values  ko.computed();  ex: this.ab = ko.computed(function() { return this.one() + this.two(); });
  7. 7. Binding events  <button data-bind="click: capitalizeLastName">Go caps</button> this.capitalizeLastName = function() { var currentVal = this.lastName(); this.lastName(currentVal.toUpperCase()); } ;
  8. 8. Lists & collections  can be used to generate repeating blocks of UI elements  done through observable arrays and foreach binding  foreach, if, ifnot  ex: function FruitsVM() { this.fruits = ko.observableArray([ new Fruit("Apple", 50), new Fruit("Orange", 35), new Fruit("Pineapple", 40) ]); } <table> <thead></thead> <tbody data-bind="foreach: fruits">  adding or removing items in observable arrays will trigger UI updates  does not regenerate the whole UI <tr>  KnockOut tracks changes in the array and only perform minimal DOM updates <td data-bind="text: name"></td> <td data-bind="text: amount"></td> </tr> </tbody> <table>
  9. 9. Custom bindings ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding is first applied to an element // Set up any initial state, event handlers, etc. here }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called once when the binding is first applied to an element, // and again whenever any observables/computeds that are accessed change // Update the DOM element based on the supplied values here. } };
  10. 10. Loading or Saving Data  KO includes 2 helper functions to serialize viewmodel data  ko.toJSON  ko.toJS  var jsonData = ko.toJSON(vm);
  11. 11. Mapping plugin  straightforward way to map that plain JavaScript object into a view model with the appropriate observables.  var viewModel = ko.mapping.fromJS(data);  ko.mapping.fromJS(data, viewModel);

×