Knockout.Js案例一Introduction

?在這第一個教程中,您將體驗的一些基本知識構建的web UI Model-View-ViewModel使用knockout.js(MVVM)模式。

?

案例1：添加:data-bind?

<p>First name:?<strong?data-bind="text:firstName">1</strong></p>

<p>Last name:?<strong?data-bind="text:lastName ">todo</strong></p>

?修改視圖中的兩個<Strong>元素,添加數據綁定屬性來顯示這個人的名字:\

Js：

function?AppViewModel()?{
????this.firstName?=?"1321";
????this.lastName?=?"Bertington";
}

//?Activates?knockout.js

ko.applyBindings(new?AppViewModel());?

?

案例2： Observable

可能你不限于顯示靜態數據。讓我們使用值綁定,以及一些常規的HTML <input>控件,使數據可編輯。

添加以下標記:

?

<p>First name:<input?data-bind="value:firstName"/></p>
<p>Last name:?<input?data-bind="value:lastName"/></p>

?

?function?AppViewModel()?{

? ??this.firstName?=?"1321";
? ??this.lastName?=?"Bertington";
}

// Activates knockout.js

ko.applyBindings(new?AppViewModel());

現在運行應用程序。當你編輯的文本在一個文本框? 　　

嗯…顯然什么也不會發生。讓我們解決……

?

實際上,當你編輯一個文本框,它更新底層視圖模型數據。但由于viewmodel屬性只是純JavaScript字符串,他們沒有通知任何人,他們已經改變了,所以UI保持靜態。

這就是為什么KO.Js有可見的概念——這些屬性,自動將問題通知每當他們的價值變化。

更新你的視圖模型使firstName和lastName屬性使用ko.observable可見:

?function?AppViewModel()?{

? ??this.firstName?=ko.observable("1321");
? ??this.lastName=?ko.observable("Bertington");
}
ko.applyBindings(new?AppViewModel());

現在重新運行應用程序和編輯文本框。

不僅這一次你會看到底層的視圖模型數據，

當你更新當你編輯,但所有相關的UI更新同步。

?

?案例3：Defining computed values典型的Computed的例子：

通常,你會想合并或將多個可觀察到的值轉換為讓別人。在這個例子中,您可能需要定義的全名是姓氏+空間+名字。

為了處理這個問題,Ko.JS有一個computed的概念(即計算屬性——這些都是引人注目的。,他們通知變化)和基于其他可見的值計算。

?

?添加一個fullName屬性視圖模型,通過添加下面的代碼在AppViewModel,firstName和lastName下面:

?function?AppViewModel()?{

? ?this.firstName?=ko.observable("1321");
? ??this.lastName=?ko.observable("Bertington");
? ??this.fullName=ko.computed(function(){
? ??return?this.firstName()+" "+this.lastName();
? ??})
}

ko.applyBindings(new?AppViewModel());

?

HTML:

<p>First name:<input?data-bind="value:firstName"/></p>
<p>Last name:?<input?data-bind="value:lastName"/></p>
<p>Full name:?<strong?data-bind="text: fullName"></strong></p>

如果你現在運行應用程序和編輯文本框時,你會發現所有UI元素(包括全稱顯示)與底層數據保持同步。

?

它是如何工作的? 　　

事情保持同步,因為依賴自動跟蹤:過去<Strong>取決于fullName,

反過來取決于firstName和lastName,

要么可以改變通過編輯文本框。只要從對象圖的任何更改造成的最小的更新都需要帶上你的視圖模型和可見的UI更新。

?

?

?案例4:Adding more behavior（綁定事件）

這個案例我們會為個按鈕加一些行為：

??this.capitalizeLastName?=?function()?{
? ? ? ??var?currentVal?=?this.lastName();? ? ? ??// Read the current value
? ? ? ??this.lastName(currentVal.toUpperCase());?// Write back a modified value
? ??};

?看，可以讀和寫一個變量的值，我們一般叫它函數。

?

接下來,添加一個按鈕到視圖,使用點擊綁定關聯與viewmodel功能點擊你只是補充道:

?<button?data-bind="click: capitalizeLastName">Go caps</button>

接下來，如果你點擊了按鈕，會發現UI的模型值變成大寫了。?

?

最后：簡述MVVM

這是一個非常簡單的示例,但它確實說明MVVM的一些要點:?

1.你有一個干凈的,UI的面向對象表示的數據和行為(你的視圖模型)ViewModel

2.另外,你有如何顯示明顯的聲明表示，到底該怎么顯示(你的視圖)View

3.您可以實現任意復雜的行為只是通過更新viewmodel對象。你不必擔心DOM元素需要修改/添加/刪除,同步的框架會為你去做。

后續教程將帶你更深!

Subsequent tutorials will take you much deeper!

?