绑定铁页和和

Question

我刚开始学习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>

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

Answer 1

您的 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，它的图案布局很直。

绑定铁页和和

Bind iron-page and and

javascript

typescript

polymer