我想在单击某个选项卡时更改 Polymer 中的 View 。为此，我想到了使用纸标签和铁页，如 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 元素不会更改 View 。如何在 Polymer 1.0 中实现所需的数据绑定(bind)？我是否需要围绕这两个元素创建一个自定义容器元素来为它们提供一个范围，使它们都可以访问这样的变量？
最佳答案
如果您想让花括号起作用，您必须将元素嵌入到 template[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>
关于javascript - 在 Polymer 1.0 中使用选项卡切换 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30551856/