observable在Knockoutjs中屬於一個核心功能，在做監控數據的改變時，必須要用到Knockoutjs的監控屬性——observable。

ko.observable()的簡單使用

首先來看一個例子：

var a = ko.observable(‘hello Knockoutjs!‘);
console.log(a()); // hello Knockoutjs!
a(‘This is Knockoutjs!‘);
console.log(a()); // This is Knockoutjs!

從上面的例子可以看出ko.observable()會先設置值再返回一個函數賦給變量a，變量a則變成了監控屬性了，然後可以通過a()

創建帶有監控屬性的View Model

創建View Model有兩種方式：

• 聲明一個對象；
• 使用new關鍵詞實例化函數。

如：

// 直接聲明一個對象的方式
var viewmodel = {
    name: ko.observable(‘satrong‘),
    job: ko.observable(‘web dever‘)
};

// 使用new關鍵詞實例化一個函數的方式
var Viewmodel = function(){
    this.name = ko.observable(‘satrong‘);
    this.job = ko.observable(‘web dever‘);
};
var viewmodel = new Viewmodel();
 

創建View Model之後，再創建一個簡單的HTML視圖

<div data-bind="text:name"></div>
<div data-bind="text:job"></div>
<div><input type="value:job" /></div>

在視圖中我們需要使用data-bind將剛剛創建的viewmodel和HTML關聯到一起，但由於瀏覽器不能識別data-bind的作用，所以我們必須還需要使用ko.applyBindings(viewmodel);來激活Knockout，這一步是必不可少的。

ko.applyBindings參數的介紹

ko.applyBindings可接受兩個參數：

• 第一個參數屬於必備參數，即前面我們創建的View Model；
• 第二個參數可選，是指Knockout控制HTML的範圍。如果為空則默認為document，如果需要指定可以通過document.getElementById(‘元素的ID‘)來設置。

在使用ko.applyBindings時可能遇到的問題：

• 提示“You cannot apply bindings multiple times to the same element.”，意思是在同一個元素上不能進行重復綁定，所以要設置好第二個參數的範圍。
• 在元素上已經添加了某些事件，但使用了ko.applyBindings後添加的事件不起作用。個人理解是這樣的，在使用ko.applyBindings後，ko會將所指定範圍內的所有元素上的事件清除掉（或者是其他原因清除掉了事件），所以為了保留我們所添加的事件我們可以在ko.applyBindings之後再添加事件。

Knockout中的鏈式寫法

正如我們前面定義的viewmodel：

var viewmodel = {
    name: ko.observable(‘satrong‘),
    job: ko.observable(‘web dever‘)
};

如果我們想修改name和job的值，可能會這樣寫道：

viewmodel.name(‘chc‘);
viewmodel.job(‘secret‘);

為了方便和簡化寫法，就像jQuery的$(‘#test‘).find(‘a‘).eq(0)這種寫法，ko當然也是少不了的，所以上面的寫法我們可以這樣簡化：

viewmodel.name(‘chc‘).job(‘secret‘);

第一次使用Markdown來寫文章，因為對其語法不是很熟練，寫起來有那麽點吃力，不過還好，也沒有用到很多的語法。

https://www.xiaoboy.com/detail/2015013117.html

Knockoutjs之observable和applyBindings的使用