Knockoutjs之observable和applyBindings的使用


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') }; 

如果我們想修改namejob的值,可能會這樣寫道:

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

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

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM