Polymer 具有选定属性的嵌套铁页

我使用的是

iron页面

元素，但是是嵌套的。例如：

在文件0-0.html中：

<iron-page>
  <1-0></1-0>
  <2-0></2-0>
</iron-page>

在文件1-0.html中：

<iron-page>
  <1-1></1-1>
  <1-2></1-2>
  <1-3></1-3>
</iron-page>

在文件2-0.html中：

<iron-page>
  <2-1></2-1>
  <2-2></2-2>
  <2-3></2-3>
</iron-page>

我需要知道从

到

（让我们称它们为子元素）的一个元素何时显示。为此，我使用了

selectedAttribute

属性，但我的问题是：

为什么当一个母亲

铁页
元素被禁用时，他会保留一项作为选中项？
最后，我想做的是在显示或隐藏
iron页面
son元素时得到通知。
有人能帮我吗

谢谢
关于传播的一切都可以通过绑定来完成。大概是

<iron-pages>
  <1-0 selected="{{selectedOne}}"></1-0>
  <2-0 selected="{{selectedTwo}}"></2-0>
</iron-pages>

this.fire("iron-pages-changed", {page: this.selected});

就这样。每当所选属性发生更改（在子元素内部），父元素将自动重新加载其
selectedOne
和
selectedTwo
属性

您还可以向
selectedOne
和
selectedTwo
属性添加观察者，这将调用一些函数，以便您准确地知道何时执行某些逻辑

所以在母元素中：

properties: {
  selectedOne: {
    value: null,
    observer: "_selectedOneChanged"
  },
  selectedTwo: {
    value: null,
    observer: "_selectedTwoChanged"
  }
}

ready: function() {
  this.addEventListener("iron-pages-changed", function() {
    ... some logic ...
  }
}

另一种解决方案

上面的解决方案很好，但在更多嵌套的元素中，几乎不可能使其工作，而且非常混乱。所以另一种方法是事件侦听器。聚合物有防火的方法，这是非常伟大的知道。您可以在中找到更多信息

简而言之：

在son元素中，您可以执行以下操作

<iron-pages>
  <1-0 selected="{{selectedOne}}"></1-0>
  <2-0 selected="{{selectedTwo}}"></2-0>
</iron-pages>

this.fire("iron-pages-changed", {page: this.selected});

和母元素：

properties: {
  selectedOne: {
    value: null,
    observer: "_selectedOneChanged"
  },
  selectedTwo: {
    value: null,
    observer: "_selectedTwoChanged"
  }
}

ready: function() {
  this.addEventListener("iron-pages-changed", function() {
    ... some logic ...
  }
}