聚合物纸标签不起作用

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') 确实返回了正确的值。因此，在第二个版本中，{{page}} 的值没有变化，所以我的标签不会做任何事情。

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

Answer 1

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

Answer 2

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

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