javascript - 绑定(bind)铁页和

我刚刚开始学习Polymer，现在将纸质选项卡和铁页绑定在一起，因此，如果单击选项卡，则内容将被动态加载。阅读完文档后，这就是我目前所拥有的

<app-toolbar>
<paper-tabs class="tabs" attr-for-selected="page" selected="{{ selectedBrowsePage }}">
    <paper-tab page="artists">
      Artist
    </paper-tab >
    <paper-tab page="artists">
      Album
    </paper-tab>
    <paper-tab page="artists">
      Project
    </paper-tab>
  </paper-tabs>
</app-toolbar>

  <iron-pages selectedBrowsePage="artist" selected="{{ selectedBrowsePage }}">
    <div attr-for-selected="page" >1</div>
  </iron-pages>

但这仍然行不通...请您提示一下我该如何解决？

最佳答案

您的iron-pages块必须固定-它通过绑定使用了selectedBrowsePage，但不会将更改传播到任何地方。 selectedBrowsePage="artist"位也是错误的，在iron-pages元素上不存在此类属性。将camelCase用于通过标记设置的属性也是无效的，如果需要，请使用dash-case。

应该是这样的：

<iron-pages attr-for-selected="page" selected="{{ selectedBrowsePage }}">
  <div page="artist">1</div>
  <div page="etc...">2</div>
  ...
</iron-pages>

与paper-tabs几乎相同。这样，iron-pages元素一旦通过selected="{{selectedBrowsePage}}"接收到某个值（例如“ artist”），它将查找具有attr-for-selected指定的属性设置为相应值（此处是第一个div ）并进行神奇的切换。

一旦掌握了它的工作原理，就可以完全放弃attr-for-selected，因为默认行为是使用索引。

从PSK看，它的图案布局很直。