简体   繁体   English

我如何仅通过可观察属性的变化就知道敲门js ViewModel的变化?

[英]How can i know change in knockout.js ViewModel just by change in its observable property?

I have a ViewModel in knockout.js for personal information. 我在kickout.js中有一个ViewModel以获取个人信息。 I want javascript to think that whole PersonViewModel is changed if just a single observable property in that model is changed. 我希望javascript认为,如果仅更改该模型中的单个可观察属性,则整个PersonViewModel都会更改。

I also have another ViewModel for address and i want the same for it. 我也有另一个ViewModel的地址,我想要同样的地址。 As an end user of program I want program to tell which view model is changed by change in any of the observable property. 作为程序的最终用户,我希望程序告诉通过更改任何可观察属性来更改哪个视图模型。

I could use "subscribe" but that means i would have to subscribe every observable inside the view model and i don't want to do that. 我可以使用“订阅”,但这意味着我将不得不在视图模型中订阅每个可观察的对象,而我不想这样做。 Figuratively, i want to subscribe the whole ViewModel instead of each observable inside it. 具象地,我想订阅整个ViewModel,而不是订阅其中的每个可观察对象。 What should i do? 我该怎么办?

function PersonViewModel() {
        this.firstName = ko.observable("John");
        this.lastName = ko.observable("Doe");
        this.middleName = ko.observable();
        this.userName = ko.observable("Johnny");
        this.dateOfBirth = ko.observable("12/12/2012");

    this.firstName.subscribe(function () {
        alert("fisrtName changed");
    });
}

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

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

My HTML: 我的HTML:

  <div id="personal-information">
        <input data-bind="value: firstName" type="text" >
        <input data-bind="value: lastName" type="text" >
        <input data-bind="value: middleName" type="text" >
        <input data-bind="value: username" type="text" >
        <input data-bind="value: dateOfBirth" type="text" >
     </div>

Any help will be appreciated. 任何帮助将不胜感激。 Thanks. 谢谢。

Knockout includes a ko.toJS function that "clones your view model's object graph, substituting for each observable the current value of that observable, so you get a plain copy that contains only your data and no Knockout-related artifacts." Knockout包含一个ko.toJS函数,该函数“克隆视图模型的对象图,为每个可观察对象替换该可观察对象的当前值,因此您将获得一个纯副本,其中仅包含您的数据,而没有与Knockout相关的工件。” If you call ko.toJS in a computed, that computed will update whenever any observable in the view model is changed. 如果您在计算ko.toJS中调用ko.toJS ,则只要视图模型中的任何可观察对象发生更改,该计算对象都会更新。

var p = ko.computed(function () {
    return ko.toJS(pvm);
});
var log = ko.observableArray();
p.subscribe(function (value) {
    log.push("Person changed");
});

https://jsfiddle.net/mbest/ubLzwerp/ https://jsfiddle.net/mbest/ubLzwerp/

Also see https://stackoverflow.com/a/7850364/1287183 另请参阅https://stackoverflow.com/a/7850364/1287183

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM