Data binding 聚合物：如何改变母体'；孩子的财产是什么？

我有一个非常简单的设置，其中父组件有一堆子组件。父组件有一个pageTitle属性，我想从显示的任何子组件更新该属性

因此，基本上我有一个带有页面标题的标题，我想根据显示的组件进行更新

以下是父组件：

<dom-module id="my-parent">

  <template>

      <h1>Page title: {{pageTitle}}</h1>

      <a on-tap="changePage" data-page="1">Go to page 1</a><br />
      <a on-tap="changePage" data-page="2">Go to Page 2</a>

      <iron-pages selected="[[page]]" attr-for-selected="data-page>
        <my-child1 data-page="1" page-title="{{pageTitle}}"></my-child1>
        <my-child2 data-page="2" page-title="{{pageTitle}}"></my-child2>
      </iron-pages>
  </template>

  <script>
    Polymer({
      is: 'my-parent',
      properties: {
        page: {type: String, value: "1"},
        pageTitle: {type: String},
      },
      changePage: function(e) {
        var elm = e.currentTarget;
        this.page = elm.getAttribute("data-page");
      }
    });
  </script>

</dom-module>

页面标题：{{pageTitle}
转到第1页

转到第2页
啊，我找到了解决办法。我必须使用attributeChanged事件，并根据“iron selected”检查类名

下面是使其工作的子组件：

<dom-module id="my-child1">

  <template>
      <p>We are on page 1</p>
  </template>

  <script>
    Polymer({
      is: 'my-child1',
      properties: {
        pageTitle: {type: String, notify: true},
      },
      attributeChanged: function(name, type) {
        if (name == "class" && this.getAttribute(name) == "iron-selected") {
          this.set("pageTitle", "Page 1");
        }
      },
    });
  </script>

</dom-module>


我们在第一页

聚合物({
是‘我的孩子1’，
特性：{
页面标题：{type:String，notify:true}，
},
attributeChanged:函数（名称、类型）{
if（name==“class”&&this.getAttribute（name）==“iron selected”）{
本集（“页面标题”、“第1页”）；
}
},
});

<dom-module id="my-child1">

  <template>
      <p>We are on page 1</p>
  </template>

  <script>
    Polymer({
      is: 'my-child1',
      properties: {
        pageTitle: {type: String, notify: true},
      },
      attributeChanged: function(name, type) {
        if (name == "class" && this.getAttribute(name) == "iron-selected") {
          this.set("pageTitle", "Page 1");
        }
      },
    });
  </script>

</dom-module>