Knockoutjs Quick Start (classic) __js

Knockoutjs is a MVVM framework for JavaScript implementations. Mainly has the following several function 1. Declarative Bindings2. Observables and Dependency Tracking3. Templating, need to understand the friend can refer to the next 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 to simplify the data binding process. Gossip less, directly to see examples, how to download also do not say, if the use of VS development of the NuGet can be a key to fix.

1. Basic bindings and Dependency tracking
First you need to define a ViewModel:
Copy code code as follows:
<script type= "Text/javascript" >
function ViewModel () {
This.firstname = "Zixin";
This.lastname = "Yin";
}
</script>

Then there's a view that shows this viewmodel:
Copy code code 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 code to correlate the two:
Copy code code as follows:
Ko.applybindings (New ViewModel ());

Put them together, note, applybinding the code must be executed after all the pages have been loaded. The page appears as:

Next look at observables, this function is not innate, the view model must be set to observable, the following methods:
Copy code code as follows:
function ViewModel () {
This.firstname = ko.observable ("Zixin");
This.lastname = ko.observable ("Yin");
}

No other need to change, at this point, if you change the value in the input box, when the focus is gone, you can see that the value in P changes as well:

Next look at the dependency tracking, that is, if a value depends on multiple values, any one of them changes, it will automatically change. This is done through the computed method, and the code is as follows:
Copy code code 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 allows FullName to change automatically as soon as the name of the A or last is changed.

You can also change the value of observable by code, and the page will automatically refresh:
Copy code code as follows:
function ViewModel () {
.........
This.capitalizelastname = function () {
This.lastname (This.lastname (). toUpperCase ());
}
}

Add a button to the page:
Copy code code as follows:
<button data-bind= "Click:capitalizelastname" >Caps</button>

Clicking on the button will leave the ViewModel Capitalizelastname method, the way to change a observable value is to use the new value as the parameter of the function call. After clicking:

2. List binding

Join us with the following order ViewModel, using Observablearray to track the array changes.
Copy code code as follows:
var products=[{name: "Thinkpad X1", price:9000},
{name: "Hp probook", price:5555},
{name: ' Mouse ', price:45}];

function order () {
var self = 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 = =;
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 inside the order should actually be obtained from the server, and the item is defined as follows:
Copy code code as follows:
function Item (product, amount) {
var self = this;
This.product = product;
This.amount = ko.observable (amount);
This.subtotal = ko.computed (function () {
return Self.amount () * self.product.price;
}, self);
}

Once the ViewModel is ready, the view can be realized. This time you need to use foreach bindings, as follows:
Copy code code 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 quantity, the price will automatically update:

The following to the order plus add and delete products, the function, first to add the following method:
Copy code code 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 code code as follows:
<td><a href= "#" data-bind= "click: $root. Remove" >Remove</a></td>

Then add a button at the bottom of the table to add the product:
Copy code code as follows:
<button data-bind= "Click:addmouse" >add a mouse</button>

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

Turn from: http://www.jb51.net/article/32784.htm