我想在单击某个选项卡时更改聚合中的视图.为此我想到了使用
paper-tabs documentation中描述的纸张标签和铁页.
这是HTML,我必须意识到这一点：
<html>
<head>
<title>Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
</head>
<body>
<paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
{{selected}}
<iron-pages selected="{{selected}}">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</iron-pages>
</body>
</html>
更改选项卡似乎有效.但看起来所选变量未正确设置,因为iron-pages元素不会更改视图.如何在Polymer 1.0中实现所需的数据绑定？我是否需要围绕这两个元素创建一个自定义容器元素,以便为它们提供一个可以访问这样一个变量的范围？
解决方法
如果要使大括号工作,则必须将元素嵌入模板[is =“dom-bind”]元素中.像这样
<template is="dom-bind" id="scope">
<span>{{number}}</span>
</template>
...
<script>
window.addEventListener('WebComponentsReady',function() { //You have to make sure that all custom elements are loaded
var scope = document.querySelector("template#scope");
scope.number = 1; // display the number 1
});
</script>
