Introduction to KnockoutJS

KnockoutJS is a JavaScript library of MVVM pattern with templates. It does not depend on jQuery. 

With KnockoutJS you can have,

• Dependency tracking : Automatically update UI when model changes
• Declarative bindings: Connect parts of your UI to your data model
• Extensible: Implement custom behaviors

What is MVVM pattern

• Model : objects and operations in your business domain, this is independent from the UI
• View Model : Pure code representation of data and operations on a UI. No HTML
• View: Interactive UI. Representing the state of the ViewModel

Here's a simple example of using KnockoutJS

To achieve two way binding you can use observables. When using observables when you update something in View, changes will be reflected in ViewModel as well.

Explicit subscribing

Used to get notifications when subscribed observable gets changed. You can assign the subscription to a variable and dispose it later.

You can force observables to notify subscribers always by using  
myViewModel.personName.extend({ notify: 'always' });

You can delay change notification by using 
myViewModel.personName.extend({ rateLimit: 50 });

 

Observable Arrays

Just like Observables but for arrays. Observable arrays only track which objects are in the array. Not the state of those objects. Observable array is actually an observable whose value is an array (with some additional methods). Check the documentation for other methods available. For the array also you can delay change notifications like for observables.

 

Computed observables (documentation)

functions that dependent on one or more other observables. Will automatically update when dependencies changes. You can also create writable observables. You can extend this by using rateLimit and notify attributes. 

See complete reference from documentation here

Writable computed observables (documentation) 

//see the documentation

Pure computed observables (documentation)

This was introduced in 3.2V. Use this if your computed do some calculation and simply returns a value. Here the evaluator does not modify other objects state).

This provides performance and memory benefits. Doesn't maintain subscriptions to its dependencies when it has no subscribers itself.

KnockoutJS - EcmaScript 5 Plugin

http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/
https://github.com/SteveSanderson/knockout-es5