1. ホーム
  2. knockout.js

[解決済み] ノックアウト 観測可能な複雑なオブジェクトのあらゆる変化に対応するサブスクライブ

2022-02-26 02:07:27

質問

あるオブジェクトで初期化されたobservableを含むビューモデルを持っています。 このオブジェクトは、それ自体がobservableを含んでいます。

私の目標は、そのオブジェクトが変更されるたびに(または、そのオブジェクトのいずれかの観測値が変更されるたびに)通知されることです。

jsfiddle

複合オブジェクト :

var ns = ns || {};

ns.ComplexObj = function (item) {
    var self = this;

    if (!item) {
        item = {};
    }

    self.id = item.Id || '';
    self.company = ko.observable(item.Company || '');
    self.email = ko.observable(item.Email || '');

    self.company.subscribe(function () {
       console.log('debug: company changed');
    });

    return self;
};

ビューモデル

ns.mainvm = function () {
   var simpleObject = ko.observable('i am pretty simple');

   simpleObject.subscribe(function (newValue) {
       document.getElementById('simpleSubscribtionFeedback').innerText = newValue;
   });

   var complexObject = ko.observable(ns.ComplexObj());
   complexObject.subscribe(function (newValue) {
       // i would like to react to any change in complex object
       document.getElementById('complexSubscribtionFeedback').innerText = 'i dont get executed :(';
   });

   return {
       simpleObject: simpleObject,
       complexObject: complexObject
   };
};

バインディング

var container = document.getElementById('wrapper');
if (container) {
   ko.applyBindings(ns.mainvm, container);
} else {
   console.warn("container for binding ko not found");
}

複雑なオブジェクトの変更に反応する可能性はありますか? 助けがあればありがたいです。

複雑なオブジェクトのダーティフラグの問題は、それが "true"に切り替わり、私がそのフラグのサブスクリプションにフックするとき、それは最初の1回だけ大丈夫だということです。

解決方法は?

次のような仕掛けがあります。

ko.computed(function() {
    return ko.toJSON(complexObject);
}).subscribe(function() {
    // called whenever any of the properties of complexObject changes
});

参照 http://jsfiddle.net/xcajt4qn/3/

これがうまくいく理由は ko.toJSON はオブジェクトのすべてのプロパティを再帰的に読み込むので、計算される内容はすべてのプロパティに依存することになります。