FreshCutDevelopment Blog

4 out of 5 dentists recommend this WordPress.com site

KnockoutJS

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.

Getting a start in blogging

A recent post by Scott Hanselman has finally convinced me that I need to get a start in the pursuit of blogging. The aim of this blog is to provide an online source of information on technological topics along with other miscellaneous endeavours.

I will try to post a brief overview of each new topic that I learn. The aim of this is two fold, firstly to provide a short overview on the various topics covered to readers, and secondly to save the information for future referral.

That brings the first post to an ending point. We’ll see whether the initial momentum can be maintained…