聚合物纸标签不起作用

Question

我有两种不同的方法可以在我的应用程序中设置选项卡，一种有效，另一种无效。不确定我做错了什么。这两个示例都在自定义元素模板中这种方式有效：

<paper-tabs id="clinic-tabs" selected="{{clinicId}}" attr-for-selected="cid" scrollable>
  <template is="dom-repeat" items="[[clinics]]" filter="_shouldDisplay" observe="active use">
    <paper-tab cid="[[item.id]]">[[item.name]]</paper-tab>
  </template>
</paper-tabs>

这种方式不行

<paper-tabs selected="{{page}}" attr-for-selected="page" scrollable>
  <paper-tab page="details">Patient Details</paper-tab>
  <paper-tab page="finance">Finance Records</paper-tab>
  <paper-tab page="history">Patient History</paper-tab>
  <paper-tab page="preopp1">Pre Op Assessment</paper-tab>
  <paper-tab page="surgery">Surgery Settings</paper-tab>
  <paper-tab page="postop">Post Op Assessment</paper-tab>
</paper-tabs>

如果我在paper-tab.html中的onTap函数上打断点，如果我使用控制台输出一个值，则在第一个 this.cid 打印出正确的值。如果我在第二个版本上放置一个断点，那么 this.page 是未定义的，尽管 this.getAttibute('page') 确实 return 是正确的值。因此，在第二个版本中，{{page}} 值没有变化，因此我的选项卡不执行任何操作。

任何人都知道如何在第二个上设置标记，这样我就可以在我的自定义元素中使用页面属性来执行操作（实际上使用 <iron-pages> 在不同页面之间切换）

Answer 1

paper-tabs 没有 attr-for-selected。它适用于数字选择。所以 selected = 0, selected = 1 等等。第一个示例之所以有效，是因为您可能将 ID 设置为 0 到 x。

文档：https://www.webcomponents.org/element/PolymerElements/paper-tabs/elements/paper-tabs

Answer 2

我实际上发现问题是宿主元素（在行为中声明）中的 page 属性对于第二种情况是 readOnly。

聚合物纸标签不起作用

Polymer paper tabs not working

polymer