从父对象绑定的对象的aurelia属性观察

我有一个关于奥雷莉亚的问题。假设我有一个产品类，这个产品有标签。一个具体的例子：衬衫是一种产品，它有一些用户可以查询的标签，如Men、XL、blue等

{
  "id": 3,
  "name": "Shirt",
  "sku": "WCZR-1",
  "tags": [
    {
      "id": 1,
      "name": "XL"
    },
    {
      "id": 2,
      "name": "Blue"
    }
  ]
}

如果管理员正在查看此产品的详细信息视图并可以编辑标记，则他将查看以下视图：

<div class="form-group">
                <label>SKU</label>
                <input type="text" value.bind="item.sku">
</div>
<div class="form-group">
    <label>Tags</label>
        <tag-manager item.bind="item"></tag-manager>
</div>

请注意，inEditMode属性不是来自web api，而是动态添加的

现在，这主要起作用了，当产品处于编辑模式时，子元素（标记管理器）可以从产品中添加\删除标记，并且父元素和子元素都可以看到产品标记集合被修改。标记管理器中的示例代码：

removeTag(tag){
    this.item.tags = this.item.tags.filter(function(el){
        return el.id !==tag.id;
    })
}

addTag(tag){
    this.item.tags.push(tag);
}

这些函数可以正常工作并成功修改项目的标记集合，但有一件事不起作用，那就是product.InEditMode属性。当父元素（详细信息视图将产品置于编辑模式，标签管理器仅在视图激活时识别该模式。但是，在初始加载和更改父视图中的InEdit mode属性后，在父视图中单击edit | cancel（编辑|取消）不会反映在子视图中。因此，尽管观察到产品的标签属性，但InEdit模式子级未观察到属性。如果我在aurelia中导入观察者定位器并观察该属性，则不会产生任何影响。示例代码：

import {ObserverLocator} from 'aurelia-framework';

    var subscription = this.observerLocator
      .getObserver(this.product, 'inEditMode')
      .subscribe(this.onChange);
  }
      onChange(newValue, oldValue) {
      //this method is called only once at the activation of the child,
      //no clicks in the parent can trigger this method again
      }

如注释所示，激活时只调用一次

onChange

方法；激活后，子元素中不会反映对父元素（编辑，取消编辑）的单击，并且不会再次调用onChange

我可以通过使用

eventAggregator

来实现这一点，但我真的很想知道为什么我不能从父对象观察对象的bool属性。我不想滥用

eventAggregator

，而不了解幕后发生的事情。任何线索都将不胜感激

编辑：

这个问题的关键在于

---

与我看到的问题稍有不同，但子视图仍然没有反映父视图模型的更改。

我建议使用稍微不同的方法，使用

BindingEngine

：

@bindable product;
productChanged(newValue, oldValue) {
  if (this.inEditModeSubscription) {
    this.inEditModeSubscription.dispose();
    this.inEditModeSubscription = null;
  }
  if (newValue) {
      this.inEditModeSubscription = this.bindingEngine
          .propertyObserver(newValue, "inEditMode")
          .subscribe(this.onEditModeChanged);
  }
}
inEditModeSubscription = null;

从

productChanged

中添加

product.inEditMode

的属性观察者可确保您不会意外地将观察者添加到

null

或

未定义的对象，并且每当
product
设置为其他对象时，它将刷新订阅

这可以确保在属性更改时始终触发您的
onEditModeChanged
。
对不起，我不明白您的问题。请将您的问题概括为几句话好吗？如果您有两个自定义元素，其中element1是element2的父元素，则两个元素都可以访问同一个数据对象的实例，（因为可绑定装饰器将其绑定到两个元素），您如何在不使用事件聚合器的情况下观察此数据对象属性的更改？您所描述的代码应该可以正常工作。我在我的应用程序中添加了类似的内容，并且可以正常工作。您在命名（项目/产品，InEditMode/InEditMode）方面存在一些不一致之处-这只是一个问题还是在您的代码中？您在哪里调用subscribe-in bind（）函数？无论如何，我建议您制作一个可运行的plunkr来说明您的问题。命名不一致只是一个问题，我将致力于创建plnkr。感谢添加的btwPlnkr注释。
@bindable product;
productChanged(newValue, oldValue) {
  if (this.inEditModeSubscription) {
    this.inEditModeSubscription.dispose();
    this.inEditModeSubscription = null;
  }
  if (newValue) {
      this.inEditModeSubscription = this.bindingEngine
          .propertyObserver(newValue, "inEditMode")
          .subscribe(this.onEditModeChanged);
  }
}
inEditModeSubscription = null;