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()
來獲取值,通過a('foo')
來改變值。
創建帶有監控屬性的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來寫文章,因為對其語法不是很熟練,寫起來有那么點吃力,不過還好,也沒有用到很多的語法。