使用纸质标签时,在铁页中预选默认页面

Question

我使用的聚合物iron-pages沿paper-tabs在我的Rails应用程序.问题是没有一个页面显示,直到其中一个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

由于您正在使用自动绑定模板,只需添加一个短脚本,在加载时设置元素的selected属性<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

如果您正在使用Polymer,您还可以通过在Web组件的Polymer属性中定义默认视图来设置它:

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

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