Polymer：检测来自父组件的对象属性更改

Question

我有一个使用 firebase-document 从 Firebase 加载对象的组件。然后将该对象传递给子组件。当我在子组件中更改对象时，在父组件中未检测到更改，因此在 Firebase 中未更新该对象。

这里是主要组件：

<dom-module id="some-component">

  <template>

    <firebase-document path="/projects/[[project_id]]" data="{{project}}"></firebase-document>

    <some-child project="{{project}}"></some-child>

  </template>

  <script>
    Polymer({
      is: 'some-component',
      properties: {
        project: {type: Object, notify: true, observer: "projectChanged"}
      },
      projectChanged: function() {
        console.log("we've detected some changes!");
      }
    });
  </script>

</dom-module>

这是子组件：

<dom-module id="some-child">

  <template>

    <a on-tap="changeProject">Let's change some property on our project!</a>

  </template>

  <script>
    Polymer({
      is: 'some-child',
      properties: {
        project: {type: Object, notify: true}
      },
      changeProject: function() {
        this.project.name = "A new name"; // this never propagates back to the parent component
      }
    });
  </script>

</dom-module>

预期的行为是，当我单击链接时，对象的属性会发生变化，它会被父级检测到，并且会有一个 console.log。然而它似乎没有发生。

更新解决方案

在子组件中使用 this.set() 可以解决问题：

this.set("project.name", "A new name")

Answer 1

我认为您的问题来自观察者。

像这样的简单观察者只观察对象本身的引用。 您可以像这样使用深度观察者

properties: {
    project: {type: Object, notify: true}
},
observers:[
    'projectChanged(project.name)'
],

或更多属性的通用版本

properties: {
    project: {type: Object, notify: true}
},
observers:[
    'projectChanged(project.*)'
],

它应该像这样工作。 这是有关该主题的完整文档的链接。 https://www.polymer-project.org/1.0/docs/devguide/observers#observing-path-changes

为了完美你也可以改变经典的聚合方式设置值，它确保框架更好地检测，替换

this.project.name = "A new name";

通过

this.set("project.name", "A new name")

这将有助于复杂的绑定案例，或者看起来很重的物体。