【问题标题】:How can i know change in knockout.js ViewModel just by change in its observable property?我怎么能通过改变其 observable 属性来知道 knockout.js ViewModel 的变化?
【发布时间】:2017-07-10 02:27:26
【问题描述】:

我在 knockout.js 中有一个 ViewModel 用于个人信息。 我希望 javascript 认为,如果该模型中只有一个可观察属性发生更改,则整个 PersonViewModel 都会更改。

我还有另一个 ViewModel 作为地址,我也想要它。 作为程序的最终用户,我希望程序通过任何可观察属性的更改来判断哪个视图模型被更改。

我可以使用“订阅”,但这意味着我必须订阅视图模型中的每个可观察对象,我不想这样做。 形象地说,我想订阅整个 ViewModel 而不是其中的每个 observable。 我该怎么办?

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

我的 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>

任何帮助将不胜感激。 谢谢。

【问题讨论】:

标签: javascript jquery mvvm knockout.js viewmodel


【解决方案1】:

Knockout 包含一个 ko.toJS 函数,该函数“克隆您的视图模型的对象图,将每个可观察对象替换为该可观察对象的当前值,因此您得到一个仅包含您的数据且不包含与 Knockout 相关的工件的纯副本。”如果您在计算中调用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://stackoverflow.com/a/7850364/1287183

【讨论】:

  • 谢谢迈克尔。但是现在我发现这仅适用于 ,当我使用
  • value 绑定 &lt;select&gt; 将更新 observable 以匹配列表中的项目之一。这就是你得到更新的原因。您可以在为主视图模型调用 applyBindings 后初始化“记录器”,或者确保在构造函数中正确设置所选值。
猜你喜欢
  • 2020-06-18
  • 2021-11-09
  • 2014-12-03
  • 2011-10-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-07-09
  • 1970-01-01
相关资源
最近更新 更多