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
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