Question

我正在尝试在Polymer的<paper-tabs>。

中创建一个可切换的视图

<paper-tabs selected="{{selected}}">
  <paper-tab>1</paper-tab>
  <paper-tab>2</paper-tab>
  <paper-tab>3</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
  <div>Page 1</div>
  <div>Page 2</div>
  <div>Page 3</div>
</iron-pages>

<script>
  var pages= document.querySelected('iron-pages');
  var tabs=document.querySelected('paper-tabs');
  tabs.addEventListener('iron-selected', function(e) {
    pages.selected=tabs.selected;
  });
</script>

使用上面的代码，<paper-tab>本身正在运行，但选项卡选择中的视图不会改变。

Answer 1

确保使用nullptr

添加了铁页

Answer 2

document.querySelected是一个错字。你可能意味着document.querySelector。
您不需要强制设置所选页面，因为您已经在使用数据绑定，这会使<iron-pages>.selected和<paper-tabs>.selected自动同步。

看起来您在自定义元素之外有一个绑定（例如，在index.html中），这需要一个dom-bind模板，如下所示：

<!-- index.html -->
<body>
  <template is="dom-bind" id="t">
    <paper-tabs selected="{{selected}}">...</paper-tabs>
    <iron-pages selected="{{selected}}">...</iron-pages>
  </template>
  <script>
    var t = document.getElementById('t');
    t.selected = 0;
  </script>
</body>

您还可以在dom-module中定义自定义元素，以避免主文档中的dom-bind模板。

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <template is="dom-bind" id="t">
    <paper-tabs selected="{{selected}}">
      <paper-tab>1</paper-tab>
      <paper-tab>2</paper-tab>
      <paper-tab>3</paper-tab>
    </paper-tabs>
    <iron-pages selected="{{selected}}">
      <div>Page 1</div>
      <div>Page 2</div>
      <div>Page 3</div>
    </iron-pages>
  </template>
  <script>
    document.addEventListener("WebComponentsReady", function() {
      // initialize selected tab
      var t = document.getElementById("t");
      t.selected = 0;
    });
  </script>
</body>

＆＃13;

codepen

如何使用Polymer的纸张标签切换视图？

2 个答案: