Javascript 与纸张选项卡一起使用时，在熨斗页面中预选默认页面

我正在rails应用程序中使用Polymer

iron pages

以及

paper选项卡。问题是，在单击其中一个
纸张选项卡之前，没有显示任何页面。我希望在没有用户交互的情况下默认选择
iron pages
中的第一页

我已将
纸张选项卡
和
铁皮页
放在
中。我已经阅读了有关数据绑定的文档，但我不知道如何实现这一点。请有人提出你有价值的建议。多谢各位

<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>


第1页
第2页
第1页（默认情况下应选择此页。）
第2页
由于您使用的是自动绑定模板，只需添加一个短脚本，在加载时设置
元素的
选定的
属性。例如（假设您使用的是
webcomponents lite.js
）：


第1页
第2页
第1页（默认情况下将选择此页。）
第2页
document.addEventListener（'WebComponentsReady'，函数（）{
var template=document.querySelector（'template[is=“dom bind”]”）；
template.selected=0；//默认情况下，selected是一个索引
});
如果您使用的是Polymer，也可以通过在web组件的Polymer属性中定义默认视图来设置默认视图：

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

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

使用自定义元素的构造函数（）将属性设置为应选择的选项卡的名称

<paper-tabs id="choiceTab" style="width:400px;" attr-for-selected='name' selected="{{choice}}">
                    <paper-tab name="tab1">Tab 1</paper-tab>
                    <paper-tab name="tab2">Tab 2</paper-tab>

                </paper-tabs>


static get properties() {
            return {
                choice: {
                    type: String,
                    reflectToAttribute: true
                }
            };
        }

constructor() {
                super();
                this.choice = 'tab1';
            }