javascript - 装订铁页和和

Question

我刚刚开始学习 polymer ，目前正在将纸标签和铁页绑定(bind)在一起，因此如果我单击标签，内容将动态加载。阅读完这里的文档后，这就是我现在所拥有的

<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>

但它仍然不起作用......你能给我一个提示我该如何解决它吗？

Answer 1

您的 iron-pages block 必须修复 - 它通过绑定(bind)消耗 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 ，它的图案布局非常直。