用聚合物将纸标签绑定到核心页答案

【问题标题】：Binding Paper-Tabs to Core-Pages with Polymer用聚合物将纸标签绑定到核心页
【发布时间】：2014-07-11 01:48:23
【问题描述】：

我正在使用 Polymer 构建一个使用纸质标签和核心页面的网站。我遇到的问题是，我似乎无法让标签的点击事件影响正在显示的页面，并且所有内容都保持隐藏状态，除非我专门选择要显示的页面。
所以我真的只是希望标签的行为方式与标签的行为方式相同。

到目前为止，这是我的代码：

<body unresolved>

  <paper-tabs selected="0" selectedindex="0"  id="paper-tabs"  >

    <paper-tab id="paper-tab" active>ABOUT</paper-tab>
    <paper-tab id="paper-tab1">PORTFOLIO</paper-tab>
    <paper-tab id="paper-tab2">CONTACT</paper-tab>

  </paper-tabs>



  <core-pages selected="{{$.paper-tab.selected}} " selectedindex="0" notap  id="core-pages">
    <about-me id="paper-tab" active>
      <h2 horizontal center-justified>Worldwide Jamie</h2>
      <p>Jamie is a Chicago-based freelance front end web developer.</p>
      <p>Clearly this website is <b>Under Development</b></p>
      <p>Come back soon to see how great your site could be</p>
    </about-me>

    <portfolio-list id="portfolio">
    <!--Insert slider?-->
    </portfolio-list>

    <contact-me id="contact">
    </contact-me>
  </core-pages>    

    </body>
</html>

提前感谢您的任何时间和考虑。

【问题讨论】：

您的问题似乎有很多答案。如果您的问题已得到解答，您可以接受其中一个作为答案。只需单击复选标记。

标签： javascript polymer

【解决方案1】：

从 Polymer 1.0+ 开始，这就是您想要使用的。

<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/iron-pages/iron-pages.html">

<paper-tabs selected="0">
    <paper-tab>Tab One</paper-tab>
    <paper-tab>Tab Two</paper-tab>
</paper-tabs>

<iron-pages selected="0">
    <div>Page One</div>
    <div>Page Two</div>
</iron-pages>

<script>
     var pages = document.querySelector('iron-pages');
     var tabs = document.querySelector('paper-tabs');

    tabs.addEventListener('iron-select', function() { 
        pages.selected = tabs.selected;
    });
</script>

【讨论】：

在两个选项卡中保留selected={{selected}}，页面绑定选择。您能否建议在开始时如何设置默认选定页面
@sivatumma，请参见此处的示例：github.com/Download/polymer-cdn/blob/master/lib/paper-tabs/demo/…

【解决方案2】：

简单。在你的脚本中使用它。

var tabs = document.querySelector('paper-tabs');
var pages = document.querySelector('core-pages');

tabs.addEventListener('core-select',function(){
  pages.selected = tabs.selected;
});

【讨论】：

对于 Polymer 1.0，这分别是 iron-pages 和 iron-select。
@EricLeichtenschlag 好点。我还没有编辑 Polymer 1.0 的答案。但看起来 OP 使用的是 0.5。

【解决方案3】：

Demo - Codepen.

<polymer-element name="my-element">
  <template>
    <style>
    /* some css */
    </style>

    <section layout vertical is="auto-binding">
      <paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout>
        <paper-tab inline flex center-center horizontal layout active>First</paper-tab>
        <paper-tab inline flex center-center horizontal layout>Second</paper-tab>
        ...
      </paper-tabs>
      <core-animated-pages selected="{{ selected }}" selectedindex="0" notap>
        <section active one flex vertical layout>
            <--some html-->
        </section>
        <section one flex horizontal layout>
          <--some html-->
        </section>
        ...
      </core-animated-pages>
    </section>
  </template>

  <script>
    Polymer({
      selected: 0
    });
  </script>
</polymer-element>

<my-element></my-element>

【讨论】：

不错，但演示可能已经过时了。

【解决方案4】：

<core-pages> 上的绑定没有被评估，因为数据绑定只为 <polymer-element> 模板内的定义设置。

Polymer 有一个特殊的“自动绑定”模板，用于放置在主页中并为顶级元素提供数据绑定。

【讨论】：

要利用之外的数据绑定，请将您的内容放在自动绑定的

【解决方案5】：

您的核心页面“已选择”属性表达式中有一个错字：paper-tab 而不是 paper-tabs
这个表达式后面有个空格
您不能使用 paper-tabs 作为属性名称。将 paper-tabs id 重命名为 paperTabs（顺便说一句。有没有办法让 Polymer 在表达式格式错误的情况下打印错误消息？）
正如@dfreedm 所说，您不能在聚合物元素之外使用数据绑定。另一种选择是：将您的整个应用程序放入聚合物元素中。

【讨论】：

【解决方案6】：

<template is="auto-binding">

   ...

  <paper-tabs selected="{{selected}}" selectedIndex="0"  id="paper-tabs"  >

   ...

  <core-pages selected="{{selected}}" notap  id="core-pages">

   ...

</template>

并且，添加到其他答案中提到的其他一些内容 - 我认为 paper-tab 元素不应该有 active 属性

【讨论】：