JavaScript

Knockout.JS

Description

  • Easily associate DOM elements with model data using a concise, readable syntax
  • When your data model's state changes, your UI updates automatically
  • Implicitly set up chains of relationships between model data, to transform and combine it
  • Quickly generate sophisticated, nested UIs as a function of your model data

URL

http://knockoutjs.com/

Samples

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
and
// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work