Jun 9, 2014

Knockout

Knockout.js is a javascript library that allows two ways bindings between html elements and data model. This means any changes to data model can be automatically reflected in DOM and vice-versa. It simplifies dynamic javascript ui with MVVM pattern.

Observables are Functions
This was little confusing in beginning and probably I spend a lot of time in order to understand this.

var personModel = {
    firstName: ko.observable(''),
    lastName: ko.observable(''),
}

This is how you access and set these properties.

var firstName = personModel.firstName();
personModel.lastName('Raj');

Observable Arrays Track Arrays, Not the Items Within
An observableArray also has some extra methods added to it to perform basic array operations-pop, push, shift, unshift, reverse, sort, splice,remove,removeall.... Refer this for complete list

ko.toJS
You get a plain copy that contains only your data and no Knockout-related artifacts

ko.toJSON
This can be used for debugging too, something like this.
<hr />
<h2>Debug</h2>
<div data-bind="text: ko.toJSON(viewModelCart)"></div>

Manual Subscription
In typical scenarios you won't need manual subscription but sometimes it becomes handy. Consider an example where you have drop-down and based on the drop down selection, you want to make an ajax call, so you can write something like this.
viewModel.selectedItem.subscribe(function(newValue) {
    //make ajax call
});

knockout.mapping plugin.
Sometime using mapping plugin saves a lot of time. You can use ignore/include to have more control while mapping.

computedObservables

knockout.validation
Very handy in terms of applying validation logic.

Adding static text on data binding
This will not work
data-bind="text: '$' + Amount"

you have to use
data-bind="text: '$' + Amount()"
or 
data-bind="text: '$' + ko.utils.unwrapObservable(Amount)"

No comments:

Post a Comment