javascript - Ember 观察嵌套模型属性

Question

在 EmberJS 中，如果我想观察嵌套模型内的属性“selectedValue”，我该怎么做？

以下似乎不起作用；

modelChanged: function() {  

}.observes('myModel.@each.@each.selectedValue'),

下面的方法也不起作用

modelChanged: function() {  

}.observes('myModel'),

这就是 myModel 的样子

[
    [{
        "prop1": "abc_1",
        "selectedValue": "abc_1"
    }, {
        "prop1": "xyz_1",
        "selectedValue": "xyz_1"
    }],
    [{
        "prop1": "abc_2",
        "selectedValue": "abc_2"
    }, {
        "prop1": "xyz_2",
        "selectedValue": "xyz_2"
    }],
    [{
        "prop1": "abc_3",
        "selectedValue": "abc_3"
    }, {
        "prop1": "xyz_1",
        "selectedValue": "xyz_1"
    }]
]

更新基于

似乎正在工作......只有几个问题；

1. In above code, "observedObjects" just adds for the first outer array and tracks property within this arr[0]. I have multiple outer array elements

   2. How can I modify the above to track for multiple properties ? i.e. In some cases, it would be "selectedValue" OR it can be "preSelectedValue" in other cases . What property it is would depend upon that object itself. But I need to track change of either selectedValue/preSelectedValue

   3. Also in observerMethod, can I get a context and check what the new selectedValue/preSelectedValue is?

Answer 1

您的嵌套模型的结构是什么？如果 myModel 是具有 selectedValue 的元素数组，则可以使用 myModel.@each.selectedValue。如果您需要多层嵌套，则不支持开箱即用。

来自documentation :

Note that @each only works one level deep. You cannot use nested forms like todos.@each.owner.name or todos.@each.owner.@each.name.

有一些解决方法取决于您的模型结构，如果您用您的结构回复或更新问题，我将更新我的答案以涵盖适当的解决方案。

更新:根据 myModel 的设置/更新方式，您可能需要调整何时调用 observeMyModelChildren 以及它如何创建观察者。

// observerMethod is called when myModel.@each.@each.selectedValue changes
observerMethod: function () {
  // handle change
},

// observedObjects tracks child observers so they can be removed
observedObjects: [],

// observeMyModelChildren listens for changes to myModel, removes 
// old observers, and adds new ones 
observeMyModelChildren: function () {
  const key = '@each.selectedValue';

  this.get('observedObjects').forEach((el) => {
    el.removeObserver(key, this, this.observerMethod);
  });
  this.set('observedObjects', []);

  let observedObjects = [];
  this.get('myModel').forEach((el) => {
    el.addObserver(key, this, this.observerMethod);
    observedObjects.pushObject(el);
  });
  this.set('observedObjects', observedObjects);
}.observes('myModel'),

更新 2:如果您想支持观察多个属性(例如其他模型)，可以通过修改 observeMyModelChildren 来实现:

observePropertyChildren: function (obj, attr) {
  console.log('setting up observers on', attr);

  var key = 'observedObjects.' + attr;
  var observedObjects = this.get(key) || [];
  observedObjects.forEach((el) => {
    el.removeObserver('@each.selectedValue', this, this.observerMethod);
  });

  this.get(attr).forEach((el) => {
    el.addObserver('@each.selectedValue', this, this.observerMethod);
    observedObjects.pushObject(el);
  });
  this.set(key, observedObjects);
}.observes('myModel', 'myOtherModel'),