KnockoutJS

by shuntacorp

Elevator Pitch 

KnockoutJS is an MVVM framework for the web designed to simplify the process of creating web pages with rich user interactions. This is achieved by a model binding system analogous to the way XAML based MVVM frameworks in the .NET space.

KnockoutJS Utility Belt (Tool 1) – Simple Model Binding

Knockout uses a simple template based ViewModel binding system to wire up various parts of your UI and keep them in sync. As demonstrated below:

Le Template..

<h1>Hello <data-bind="text: name"></h1>
Name:<input type="text" data-bind="value: name"/>

Le binding code…

// wires up the 'name' property of
//our ViewModel into the
//Knockout binding system
function SampleViewModel() {
this.name = ko.observable("");
}

// Activates knockout.js binding system
ko.applyBindings(new SampleViewModel());

The above code  specifies a template using the HTML5 ‘data-‘ attribute to create a binding to the name property of the ViewModel defined at the end of the code snippet. Updating a value in the text box causes a corresponding update in the heading text. This is a toy example of Knockouts model binding capabilities. Coming tutorials will delve into the inner workings of the binding system and flex them in a more compelling set of scenarios.

Advertisements