Question

我使用iron-page元素但是以嵌套的方式。例如：

在档案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>

我需要知道何时显示从<1-1>到<2-3>（让我们称之为子元素）的元素之一。为此，我使用了selectedAttribute属性，但我的问题是：

为什么当母iron-page元素被禁用时，他会保留一个项目？我最后要做的是在显示或隐藏 iron-page子元素时收到通知。有人可以帮助我吗？

由于

Answer 1

关于传播的一切都可以通过绑定来完成。像

这样的东西

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

在son元素中定义属性：selected。并设置它们notify: true。 Notify表示每当此属性更改时，绑定到此值的父元素属性将自动更新。

属性：{ 已选择：{ 值：null，通知：是的 } }

在子元素内，iron-pages必须绑定到selected属性。像：

<iron-pages selected="{{selected}}">

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

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

所以在母元素中：

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

另一种解决方案

上面的解决方案很好但是在更多嵌套的元素中，它几乎不可能使其工作并且它非常混乱。所以另一种方式是事件监听器。聚合物有火法，真的很有用。您可以在documentation找到更多信息。

简言之：

在son元素中你做了类似

的事情

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

和母亲元素：

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

带有所选属性的嵌套铁页

1 个答案: