与纸张选项卡一起使用时，预选铁页中的默认页。

Question

我在我的rails应用程序中使用聚合物iron-pages和paper-tabs。问题是，在单击其中一个paper-tabs之前，没有显示任何页面。我希望在没有用户交互的情况下，默认情况下选择iron-pages中的第一页。

我把paper-tabs和iron-pages都放在<template is='dom-bind'></template>里了。已经阅读了有关数据绑定的文档，但我不知道如何实现这一点。请有人提出你的宝贵建议。谢谢。

<template is="dom-bind">
  <div class="middle">
    <paper-tabs class="bottom self-end" selected="{{selected}}">
      <paper-tab>Page 1</paper-tab>
      <paper-tab>Page 2</paper-tab>
    </paper-tabs>
  </div>
  <div class="bottom">
    <iron-pages selected="{{selected}}">
      <div> Page 1(This should be selected by default.)
      </div>
      <div> Page 2
      </div>
    </iron-pages>
  </div>
</template>

Answer 1

由于您使用的是自动绑定模板，因此只需添加一个简短的脚本，在加载时设置<iron-pages>元素的<iron-pages>属性。例如(假设您正在使用webcomponents-lite.js)：

<template is="dom-bind">
  <div class="middle">
    <paper-tabs class="bottom self-end" selected="{{selected}}">
      <paper-tab>Page 1</paper-tab>
      <paper-tab>Page 2</paper-tab>
    </paper-tabs>
  </div>
  <div class="bottom">
    <iron-pages selected="{{selected}}">
      <div> Page 1 (This will be selected by default.)
      </div>
      <div> Page 2
      </div>
    </iron-pages>
  </div>
</template>

<script>
  document.addEventListener('WebComponentsReady', function () {
    var template = document.querySelector('template[is="dom-bind"]');
    template.selected = 0; // selected is an index by default
  });
</script>

Answer 2

如果使用的是聚合物，还可以通过在web组件的聚合物属性中定义默认视图：

Polymer({
  is: 'your-web-component',

  properties: {
    selected: {
        value: 0
    }
  }
});