Knockout.Js中的Observables監(jiān)控屬性怎么用

這篇文章主要介紹了Knockout.Js中的Observables監(jiān)控屬性怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Knockout.Js中的Observables監(jiān)控屬性

KO一個(gè)重要的功能是當(dāng)你的view model改變的時(shí)候能自動(dòng)更新你的界面。當(dāng)你的view model部分改變的時(shí)候KO是如何知道的呢？答案是：你需要將你的model屬性聲明成observable的, 因?yàn)樗欠浅Ｌ厥獾腏avaScript objects，能夠通知訂閱者它的改變以及自動(dòng)探測(cè)到相關(guān)的依賴(lài)。

var myViewModel = {

    personName: ko.observable('aehyok'),

    personAge: ko.observable(25)

};

你根本不需要修改view – 所有的data-bind語(yǔ)法依然工作，不同的是他能監(jiān)控到變化，當(dāng)值改變時(shí)，view會(huì)自動(dòng)更新。

監(jiān)控屬性的讀操作（read）

///監(jiān)控屬性的讀操作（read）

alert(myViewModel.personAge);

監(jiān)控屬性的寫(xiě)操作（write）

///監(jiān)控屬性的寫(xiě)操作（write）

myViewModel.personName("aehyok-Test");

Dependent Observables依賴(lài)監(jiān)控屬性

如果你已經(jīng)有了監(jiān)控屬性firstName和lastName，你想顯示全稱(chēng)怎么辦？ 這就需要用到依賴(lài)監(jiān)控屬性了 – 這些函數(shù)是一個(gè)或多個(gè)監(jiān)控屬性， 如果他們的依賴(lài)對(duì)象改變，他們會(huì)自動(dòng)跟著改變。

 例如：繼續(xù)在上面的ViewModel中添加兩個(gè)屬性 firstName和lastName

var myViewModel = {

    personName: ko.observable('aehyok'),

    personAge: ko.observable(25),

    firstName: ko.observable('aehyok'),

    lastName: ko.observable('Leo')

};

并且添加一個(gè)依賴(lài)監(jiān)控屬性，來(lái)返回姓名的全稱(chēng)

///依賴(lài)監(jiān)控屬性

myViewModel.fullName = ko.dependentObservable(function () {

    return this.firstName() + " " + this.lastName();

}, myViewModel);

并且綁定到View視圖界面上的元素

The fullname is <span data-bind="text: fullName"></span>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Knockout.Js中的Observables監(jiān)控屬性怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!