2017-02-20 3 views
1

私は、データバインディングのためのノックアウトでasp.net mvcを使用しています。これらの入力フィールドのデフォルト値は、データベース内の3つの異なるテーブルからフェッチさ複数のViewModelでknockout.jsを使用するプログラムでは、プロパティの変更によって1つの特定のビューモデルが変更されたことをどのように知ることができますか?

<div id="personal-information"> 
    <input data-bind="value: firstName" type="text" > 
    <input data-bind="value: lastName" type="text" > 
</div> 
<div id="contact-information"> 
    <input data-bind="value: homePhone" type="text" > 
    <input data-bind="value: mobile" type="text" > 
</div> 
<div id="address-information"> 
    <input data-bind="value: city" type="text" > 
    <input data-bind="value: street" type="text" > 
</div> 

:以下のように

function PersonViewModel() { 
     this.firstName = ko.observable("@Model.FirstName"); 
     this.lastName = ko.observable("@Model.LastName"); 
    } 
    function ContactViewModel() { 
     this.homePhone = ko.observable("@Model.HomePhone"); 
     this.mobile = ko.observable("@Model.Mobile"); 
    } 

    function AddressViewModel() { 
     this.city = ko.observable("@Model.City"); 
     this.street = ko.observable("@Model.Street"); 
    } 

var pvm = new PersonViewModel(); 
    var avm = new AddressViewModel(); 
    var cvm = new ContactViewModel(); 
    var pNode = $("#personal-information").get(0); 
    var aNode = $("#address-information").get(0); 
    var cNode = $("#contact-information").get(0); 
    ko.applyBindings(pvm, pNode); 
    ko.applyBindings(avm, aNode); 
    ko.applyBindings(cvm, cNode); 

HTML: Iは以下のように3つのビューのモデルを持っています。これらの値を編集し、それらのテーブルのデータを更新したいと思います。

PersonViewModelの入力値のみを変更すると、personテーブルのみの更新クエリを呼び出すajaxリクエストを作成します。 アドレスと連絡先のViewModelについても同様です。私はajaxリクエストを作成する方法を知っています。

しかし、私の問題は:knockoutJsを使って、残りの部分を残すことができるように更新された特定のViewModelだけを知ることができますか?

答えて

0

各ビューモデルに対して、他の観測対象が登録できる方法を作成できます。例えば、PersonViewModelため:

function PersonViewModel() { 
    this.firstName = ko.observable("@Model.FirstName"); 
    this.lastName = ko.observable("@Model.LastName"); 

    this.updatePerson = function() { /* AJAX */ }; 

    // subscriptions 
    this.firstName.subscribe(this.updatePerson); 
    this.lastName.subscribe(this.updatePerson); 
} 

だからたびのfirstName又はlastNameのの値は、updatePerson方法がトリガされる変更します。

他のビューモデル

function ContactViewModel() { 
    this.homePhone = ko.observable("@Model.HomePhone"); 
    this.mobile = ko.observable("@Model.Mobile"); 

    this.updateContact = function() { /* AJAX */ }; 

    // subscriptions 
    this.homePhone.subscribe(this.updateContact); 
    this.mobile.subscribe(this.updateContact); 
} 

function AddressViewModel() { 
    this.city = ko.observable("@Model.City"); 
    this.street = ko.observable("@Model.Street"); 

    this.updateAddress = function() { /* AJAX */ }; 

    // subscriptions 
    this.city.subscribe(this.updateAddress); 
    this.street.subscribe(this.updateAddress); 
} 
+0

これは非常に有用であるため同じ考え。ラファエルに感謝します。私がしたいことのために働く。しかし、各観測点についてsubscribe(this.update ...)と呼ぶことなくそれを行う方法はありますか?私は今、それぞれのオブザーバブルのために同じコードではなく、それだけですべてを扱う簡単な調整があります。 – Prabesh

+0

他のいくつかのオブザーバブルの変更を 'リッスン'し、この計算されたオブザーバブルのみを更新メソッドにサブスクライブする計算済みオブザーバブルを使用することができます - http://stackoverflow.com/a/9278782/1942895 –

+0

この作業はでのみ、