Polymer框架paper-tabs与iron-pages绑定失效问题求助

嘿，我帮你梳理下代码里的几个关键问题，调整后就能正常实现标签页切换加载内容啦：

问题1：paper-tab的page属性重复设置 #

你代码里三个<paper-tab>的page属性都写成了"artists"，这会导致不管点击哪个标签，selectedBrowsePage的值都只会是"artists"，根本没法区分不同标签页。

修复方式：给每个<paper-tab>设置唯一且对应的page值：

<paper-tab page="artists">Artist</paper-tab>
<paper-tab page="album">Album</paper-tab>
<paper-tab page="project">Project</paper-tab>

问题2：iron-pages的属性配置错误 #

你的<iron-pages>写了无效的selectedBrowsePage="artist"属性，而且缺少attr-for-selected来指定匹配子元素的属性，同时子元素也没设置对应的page属性。

修复方式：

• 添加attr-for-selected="page"告诉iron-pages用子元素的page属性来匹配选中状态
• 移除无效的selectedBrowsePage属性
• 给每个内容块添加对应page属性，和paper-tab的page值一一对应

问题3：缺少对应标签页的内容元素 #

你当前的<iron-pages>里只有一个内容块，得为每个标签页都添加对应的内容区域。

完整修复后的代码示例 #

<app-toolbar>
  <paper-tabs class="tabs" attr-for-selected="page" selected="{{ selectedBrowsePage }}">
    <paper-tab page="artists">Artist</paper-tab>
    <paper-tab page="album">Album</paper-tab>
    <paper-tab page="project">Project</paper-tab>
  </paper-tabs>
</app-toolbar>

<iron-pages attr-for-selected="page" selected="{{ selectedBrowsePage }}">
  <div page="artists">艺术家列表内容</div>
  <div page="album">专辑列表内容</div>
  <div page="project">项目列表内容</div>
</iron-pages>

核心注意点 #

• 确保<paper-tab>的page属性值和<iron-pages>子元素的page属性完全匹配
• 两个组件绑定同一个selectedBrowsePage变量，实现状态同步
• 必须给<iron-pages>设置attr-for-selected="page"，否则无法识别子元素的匹配属性

内容的提问来源于stack exchange，提问作者Anna F