余烬观察嵌套模型属性

Ember observe nested model property

本文关键字：属性 模型 嵌套 观察 余烬      更新时间：2023-09-26

在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. 在上面的代码中，"observedObjects"只是添加了第一个外部数组，并在这个arr[0]中跟踪属性。我有多个外层数组元素

  2. 我如何修改上述跟踪多个属性?即。在某些情况下，它可能是"selectedValue"，也可能是在其他情况下为preSelectedValue。这是什么性质要看情况了在那个物体本身上。但我需要跟踪两者的变化selectedValue/preSelectedValue

  3. 同样在observerMethod中，我可以得到一个上下文并检查新的selectedValue/preSelectedValue是什么?

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

来自文档:

注意@each只作用于一个层次。您不能使用嵌套的表单，如todos.@each.owner.name或todos.@each.owner.@each.name。

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

Update:根据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'),
相关文章：