Polymer - 让父元素等待子元素完成执行

Question

我有一个名为 parent-element 的元素，其属性名为 name。

parent-element 有一个名为 child-element 的子元素。 两者都有一个名为 name

的双向绑定(bind)属性

添加代码片段来解释我上面所说的内容

<parent-element>
  <template>
    <child-element name={{name}}> </child-element>
  </template>
 <script>
   properties: {
    name: String
    }
 </script>
</parent-element>

我的问题:

我希望 parent-element 等待 child-element 执行并发送回属性 name (或)至少 每次 child-element 为 name 属性发送新值后，>parent-element 必须重新渲染。

有关于如何执行此操作的示例吗？

Answer 1

您应该在子元素中将 notify 标记为 true，并在父元素中的 name 属性上添加观察者。这样，每当子元素中的属性发生更改时，您的父元素都会收到通知。 请注意，您需要进行从父级到子级的双向绑定(bind)才能使其正常工作。 如果您不希望父级更新子级的属性，请标记子级的name 属性为 readOnly

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">

<dom-module id="child-element">
  <template></template>
</dom-module>
<script>
  Polymer({
    is: 'child-element',
    properties: {
      name: {
        type: String,
        notify: true
      }
    },
    attached: function() {
      this.name = "John";
    }
  });
</script>



<dom-module id="parent-element">
  <template>
    [[name]]
    <child-element name="{{name}}"></child-element>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'parent-element',
    properties: {
      name: {
        type: String,
        value: "James",
        observer: '_nameChanged'
      }
    },
    _nameChanged: function(newVal) {
      console.log("Name is", this.name);
    }
  });
</script>

<parent-element></parent-element>