[go: up one dir, main page]
Scribd
Upload
64 views11 pages

KnockoutJS for Web Developers

KnockoutJS is a JavaScript library that uses the model-view-viewmodel (MVVM) pattern to build dynamic web UIs. It uses declarative bindings to connect HTML to JavaScript viewmodels, tracking changes to automatically update the UI. Key features include bindings for text, appearance, control flow, forms, templates, observables for notifications on property changes, computed values, event bindings, and lists with foreach bindings. It also supports custom bindings, loading/saving data, and mapping plain JS objects to viewmodels.

Uploaded by

sridhiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
64 views11 pages

KnockoutJS for Web Developers

KnockoutJS is a JavaScript library that uses the model-view-viewmodel (MVVM) pattern to build dynamic web UIs. It uses declarative bindings to connect HTML to JavaScript viewmodels, tracking changes to automatically update the UI. Key features include bindings for text, appearance, control flow, forms, templates, observables for notifications on property changes, computed values, event bindings, and lists with foreach bindings. It also supports custom bindings, loading/saving data, and mapping plain JS objects to viewmodels.

Uploaded by

sridhiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

KnockoutJS

James Chen
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
Views & Viewmodel

 View
 Html
 Viewmodel
 JavaScript file
 Written as functions
 Ex:
function UserVM() {
this.name = “James”;
this.age = “5”;
}
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
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“);
}
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();
});
Binding events

 <button data-bind="click: capitalizeLastName">Go caps</button>


this.capitalizeLastName = function() {
var currentVal = this.lastName();
this.lastName(currentVal.toUpperCase());
};
Lists & collections

 can be used to generate repeating blocks of UI elements


 done through observable arrays and foreach binding
 foreach, if, ifnot
<table>
 ex: <thead></thead>
function FruitsVM() { <tbody data-bind="foreach: fruits">
this.fruits = ko.observableArray([ <tr>
new Fruit("Apple", 50),
<td data-bind="text: name"></td>
<td data-bind="text: amount"></td>
new Fruit("Orange", 35),
</tr>
new Fruit("Pineapple", 40) </tbody>
]); <table>
}
 adding or removing items in observable arrays will trigger UI updates
 does not regenerate the whole UI
 KnockOut tracks changes in the array and only perform minimal DOM updates
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.
}
};
Loading or Saving Data

 KO includes 2 helper functions to serialize viewmodel data


 ko.toJSON
 ko.toJS
 var jsonData = ko.toJSON(vm);
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);

You might also like