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>

预期的行为是，当我单击 link 时，对象的 属性 会发生变化，它会被父级检测到，并且会出现 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.*)'
],

它应该像这样工作。 这是有关该主题的完整文档的 link。 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")

这对复杂的装订盒或看起来很重的物体会有帮助。