在 Polymer 1.0 中使用选项卡切换视图

Question

我想在单击某个选项卡时更改 Polymer 中的视图。为此，我想到了使用 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 中实现所需的数据绑定？我是否需要围绕这两个元素创建一个自定义容器元素来为它们提供一个范围，使它们都可以访问这样的变量？

Answer 1

如果要使大括号起作用，则必须将元素嵌入到 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>

Answer 2

我也运行遇到这个问题。在这里找到了对我有用的修复：

https://github.com/PolymerElements/iron-pages/issues/3

试试这个：

var p = document.querySelector('iron-pages'); p._removeListener(p.activateEvent);

在 Polymer 1.0 中使用选项卡切换视图

Switch View with Tabs in Polymer 1.0

html

javascript

scope

polymer