观察可观察对象中的所有属性变化

Question

我正在使用 KnockoutJS 3.4。

我的视图模型（TypeScript）如下所示：

export class ItemsViewModel {
    public currentItem: KnockoutObservable<ItemViewModel>;
    public items: KnockoutObservableArray<KnockoutObservable<ItemViewModel>>;
    /* snip */
}

ItemViewModel 包含一堆可观察的属性。这些包括Id、Name 和Description。

我希望能够订阅currentItem 中发生的更改。使用 currentItem.subscribe 监视 currentItem 可观察值的变化，而不是当前项目中的属性。我已经看到另一个被建议为重复的问题，但它只是跟踪整个对象的更改 - 我想知道该对象的特定属性何时更改。

我怎样才能以最有效的方式做到这一点？

编辑我已阅读 cmets 和相关问题。它不识别更改的属性。我已更新此问题以反映这一点。

Answer 1

为了确定修改了哪个属性，您需要一个不太通用的解决方案。您可以通过将扩展程序附加到需要跟踪的每个属性来做到这一点。我会让扩展器接受一个可订阅通知的视图模型级别，以及被扩展的属性的名称。 （遗憾的是 JavaScript 没有反射来使该部分可编码）

ko.extenders.trackChange = function (target, options) {
    target.subscribe(function (newValue) {
        if (ko.isSubscribable(options.notifier)) options.notifier.notifySubscribers(options.propertyName);
    });
    return target;
};

然后在您的视图模型中添加可订阅和订阅。

self.propertyChanged = new ko.subscribable();
self.propertyChanged.subscribe(function(propertyName){
  console.log(propertyName + " was updated");
});

最后将扩展器添加到您的属性中。

self.property1 = ko.observable(0).extend({trackChange: { propertyName: 'property1', notifier: self.propertyChanged }});
self.property2 = ko.observable(0).extend({trackChange: { propertyName: 'property2', notifier: self.propertyChanged }});
self.property3 = ko.observable(0).extend({trackChange: { propertyName: 'property3', notifier: self.propertyChanged }});

如果您希望在每个属性上都使用它，您可以通过视图模型上的循环自动附加扩展器：

self.property1 = ko.observable();
self.property2 = ko.observable();
self.property3 = ko.observable();

for (key in self) {
    if (self.hasOwnProperty(key) && ko.isObservable(self[key])) {
        self[key].extend({trackChange: { propertyName: key, notifier: self.propertyChanged }})
    }
}