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>

如果我在onTap中的paper-tab.html函数上放置断点，如果我使用控制台输出值，则在第一个函数上放置断点 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

聚合物纸标签不起作用

2 个答案: