Knockoutjs Quick Start (classic)

Knockoutjs is a JavaScript-implemented MVVM framework. There are several main functions:

1. Declarative Bindings

2. Observables and Dependency Tracking

3. Templating

It has a significant effect on separating the business logic and view of the foreground from simplifying the data binding process. Gossip less, directly see examples, how to download also do not say, if you use vs development of the words with NuGet can be done with a button.

1. Basic bindings and Dependency tracking
You first need to define a ViewModel:

Copy CodeThe code is as follows:
<script type= "Text/javascript" >
function ViewModel () {
This.firstname = "Zixin";
This.lastname = "Yin";
}
</script>

Then there is a view to show this viewmodel:

Copy CodeThe code is as follows:
<div>
<p data-bind= "Text:firstname" ></p>
<p data-bind= "Text:firstname" ></p>
<input data-bind= "Value:firstname"/>
<input data-bind= "Value:lastname"/>
</div>

You can see the meaning of declarative binding from this view, and you can bind the value of the data to the appropriate place by simply using the Data-bind property on the label. With view and ViewModel, you need the code to relate the two:

Copy CodeThe code is as follows:
Ko.applybindings (New ViewModel ());

Put them together, notice that the applybinding code must be executed after the page is loaded. The page appears as:

Next look at observables, this function is not innate, you must set the view model to observable, the method is as follows:

Copy CodeThe code is as follows:
function ViewModel () {
This.firstname = ko.observable ("Zixin");
This.lastname = ko.observable ("Yin");
}

No other need to change, this time, if you change the value in the input box, when the focus left, you can find that the value of P also changed:

Look at dependency tracking below, that is, if a value depends on more than one value, and any one of them changes, it will change automatically. This is achieved through the computed method, which is as follows:

Copy CodeThe code is as follows:
function ViewModel () {
This.firstname = ko.observable ("Zixin");
This.lastname = ko.observable ("Yin");
This.fullname = ko.computed (function () {return this.lastname () + "" + this.firstname ();},this);
}

Note that getting a observable value is a function call. This way, when first or last name changes, FullName will automatically follow the change.

You can also change the value of observable by code, and the page will automatically refresh:

Copy CodeThe code is as follows:
function ViewModel () {
.........
This.capitalizelastname = function () {
This.lastname (This.lastname (). toUpperCase ());
}
}

Add a button to the page:

Copy CodeThe code is as follows:
<button data-bind= "Click:capitalizelastname" >Caps</button>

Click on the button and it will go. ViewModel's Capitalizelastname method, the way to change the value of a observable is to use the new value as a parameter to the function call. After clicking:

2. List binding

Join us with the following order ViewModel, using Observablearray to track changes in the array.

Copy CodeThe code is as follows:
var products=[{name: "Thinkpad X1", price:9000},
{name: "Hp ProBook", price:5555},
{Name: "Mouse", price:45}];

function Order () {
var = this;
Self.items = Ko.observablearray ([
This data should the load from server
New Item (Products[0], 1),
New Item (products[1],2)]);
Self.price = ko.computed (function () {
var p=0;
for (var i = 0; i < Self.items (). length; i++) {
var item = Self.items () [i];
p + = Item.product.price * Item.amount ();
}
return p;
}, self);
}

The item in order should actually be obtained from the server, and the item definition is as follows:

Copy CodeThe code is as follows:
function Item (product, amount) {
var = this;
This.product = product;
This.amount = ko.observable (amount);
This.subtotal = ko.computed (function () {
return Self.amount () * self.product.price;
}, self);
}

When ViewModel is ready, you can implement view. This time you need to use the foreach binding, as follows:

Copy CodeThe code is as follows:
<table>
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
<td>Price</td>
</tr>
</thead>
<tbody data-bind= "Foreach:items" >
<tr>
&LT;TD data-bind= "Text:product.name" ></td>
<td><select data-bind= "Options:[1,2,3,4,5,6],value:amount" ></select></td>
&LT;TD data-bind= "Text:subtotal" ></td>
</tr>
</tbody>
</table>

Such a basic order page is good, can select the quantity, the price will be automatically updated:

The following to add additions and deletions to the order of the function, first give order the following method:

Copy CodeThe code is as follows:
function Order () {
......
Self.remove = function (item) {
Self.items.remove (item);
}

Self.addmouse = function () {
Self.items.push (New Item (products[2],1));
}
}

Add a column Delete button to the table:

Copy CodeThe code is as follows:
<td><a href= "#" data-bind= "click: $root. Remove" >Remove</a></td>

Then add a button to add the product at the bottom of the table:

Copy CodeThe code is as follows:
<button data-bind= "Click:addmouse" >add a mouse</button>

At this time, the function of Observablearray, when you click the Delete button or the bottom of the button, the page node will change, and do not need to manually update the DOM node, which makes the front-end JS greatly simplified.

Transferred from: http://www.thinksaas.cn/group/topic/40958/

Knockoutjs Quick Start (classic)