javascript 使用聚合物将纸标签绑定到核心页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24688986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding Paper-Tabs to Core-Pages with Polymer
提问by worldwidejamie
I'm building a site with Polymer that uses paper-tabs and core-pages. 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.
So I really just want the tabs to behave the way tabs are supposed to behave.
我正在使用 Polymer 构建一个站点，该站点使用纸标签和核心页面。我遇到的问题是，我似乎无法获得选项卡的点击事件来影响正在显示的页面，并且所有内容都保持隐藏状态，除非我特别选择要显示的页面。
所以我真的只希望选项卡的行为方式应该是选项卡的行为。
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.
提前感谢您的任何时间和考虑。
采纳答案by Charles Clayton
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>
回答by Richik SC
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;
});
回答by DonSinDRom
<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>
回答by dfreedm
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
回答by Dirk Grappendorf
There's a typo in your core-pages 'selected' attribute expression: paper-tabinstead of paper-tabs
There's a trailing space behind this expression
You cannot use
paper-tabsas a property name. Rename the paper-tabsid topaperTabs(btw. is there a way to make Polymer print an error message in case of a malformed expression?)As @dfreedm said, you cannot use data binding outside a polymer-element. Another option is: put your whole app into a polymer-element.
您的核心页面“选定”属性表达式中存在拼写错误：paper-tab而不是paper-tabs
这个表达式后面有一个尾随空格
不能
paper-tabs用作属性名称。将paper-tabsid重命名为paperTabs（顺便说一句。有没有办法让 Polymer 在出现格式错误的表达式时打印错误消息？）正如@dfreedm 所说，您不能在聚合物元素之外使用数据绑定。另一种选择是：将您的整个应用程序放入一个聚合物元素中。
回答by actionless
<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-tabelement shouldn't have activeattribute
并且，添加到其他答案中提到的其他一些东西 - 我认为paper-tab元素不应该有active属性
