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

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

像这样的简单观察者只观察物体本身的参考。您可以使用深度观察者，而不是像这样

Runnable

或更多属性通用版

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

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

为了完美，您还可以通过聚合方式改变设置值的经典方式，确保通过框架更好地检测，重新启动

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

通过

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

它将有助于复杂的绑定案例或似乎重物。

Polymer：从父组件

1 个答案: