使用聚合物将纸张标签绑定到核心页面

Question

I'm building a site with Polymer that uses paper-tabs and core-pages. 我正在使用Polymer构建一个使用纸质标签和核心页面的网站。 The problem I'm running into is that I can not seem to get the click event for the tabs to affect the pages being shown and all content remains hidden unless I specifically select which page I want shown. 我遇到的问题是，我似乎无法让标签的click事件影响正在显示的页面，并且所有内容都保持隐藏状态，除非我专门选择我想要显示的页面。
So I really just want the tabs to behave the way tabs are supposed to behave. 所以我真的只是想让标签表现出标签应该表现的方式。

Here is my code so far: 到目前为止，这是我的代码：

<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>

Thanks in advance for any time and consideration. 提前感谢您的任何时间和考虑。

Answer 1

As of Polymer 1.0+, this is what you'll want to be using. 从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>

Answer 2

Simple. 简单。 use this in your script. 在脚本中使用它。

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

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

Answer 3

Demo - Codepen. 演示 - 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>

Answer 4

The binding on <core-pages> is not being evaluated because data binding is only set up for definitions inside of a <polymer-element> template. 未评估<core-pages>上的绑定，因为仅为<polymer-element>模板内的定义设置了数据绑定。

Polymer has a special "auto-binding" template that is meant to be put in the main page and provide data-binding for top level elements. Polymer有一个特殊的“自动绑定”模板，可以放在主页面中，为顶级元素提供数据绑定。

More info: http://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside 更多信息： http ： //www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside

Answer 5

There's a typo in your core-pages 'selected' attribute expression: paper-tab instead of paper-tabs 您的核心页面“选定”属性表达式中存在拼写错误： 纸张标签而不是纸张标签
There's a trailing space behind this expression 这个表达式背后有一个尾随空格
You cannot use paper-tabs as a property name. 您不能使用paper-tabs作为属性名称。 Rename the paper-tabs id to paperTabs (btw. is there a way to make Polymer print an error message in case of a malformed expression?) 将paper-tabs id重命名为paperTabs （顺便说一下，有没有办法在表达格式错误的情况下使Polymer打印出错误消息？）
As @dfreedm said, you cannot use data binding outside a polymer-element. 正如@dfreedm所说，你不能在聚合物元素之外使用数据绑定。 Another option is: put your whole app into a polymer-element. 另一个选择是：将整个应用程序放入聚合物元素中。

Answer 6

<template is="auto-binding">

   ...

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

   ...

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

   ...

</template>

and, to add to some other things mentioned in other answers — i think paper-tab element shouldn't have active attribute 并且，为了添加其他答案中提到的其他一些东西 - 我认为paper-tab元素不应该具有active属性

使用聚合物将纸张标签绑定到核心页面

问题描述

6 个解决方案

解决方案1
14 已采纳 2015-10-21 18:37:52

解决方案2
8 2014-07-23 21:26:42

解决方案3
6 2014-12-07 02:16:39

解决方案4
3 2014-07-11 06:25:12

解决方案5
3 2014-07-11 09:27:54

解决方案6
1 2014-11-03 20:37:05

使用聚合物将纸张标签绑定到核心页面

问题描述

6 个解决方案

解决方案1 14 已采纳 2015-10-21 18:37:52

解决方案2 8 2014-07-23 21:26:42

解决方案3 6 2014-12-07 02:16:39

解决方案4 3 2014-07-11 06:25:12

解决方案5 3 2014-07-11 09:27:54

解决方案6 1 2014-11-03 20:37:05

解决方案1
14 已采纳 2015-10-21 18:37:52

解决方案2
8 2014-07-23 21:26:42

解决方案3
6 2014-12-07 02:16:39

解决方案4
3 2014-07-11 06:25:12

解决方案5
3 2014-07-11 09:27:54

解决方案6
1 2014-11-03 20:37:05