初步認識knockoutjs

bxyang_0215發表於2012-05-10
JS
knockout是MVVM模式，所謂的MVVM就是模型(M)、檢視(V)、檢視模型(VM)。
模型和檢視不用解釋了，跟MVC中模型和檢視是一樣的，而檢視模型則是把檢視和模型進行繫結。
knockout簡單的用法：
html中的程式碼：
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
js中的程式碼：
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}
 
//下面是將模型跟檢視繫結
ko.applyBindings(new AppViewModel());
 
如果AppViewModel中的firstName的值發生變化，那麼與之繫結的strong標籤的值會隨之發
生變化，這不是最能體現knockout好處的一個列子；
 
另外一個列子
html中的程式碼：
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
js中的程式碼：
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());
 
這樣寫，你就會發現，如果你改變了input的值時，當該input離焦時，你會發現，與該input
相應的strong標籤的值立馬發生了改變：
最初的效果：
當改變First name文字框中的值後滑鼠離焦時，立刻就會出現以下效果：

相關文章