6

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

我已经把paper-tabsiron-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>
4

3 回答 3

8

由于您使用的是自动绑定模板,因此只需添加一个简短的脚本,在加载时设置元素的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>
于 2015-06-10T11:18:58.170 回答
8

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

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

  properties: {
    selected: {
        value: 0
    }
  }
});
于 2016-07-17T20:43:41.637 回答
0

使用自定义元素的 constructor() 将属性设置为应选择的选项卡的名称

<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';
            }
于 2017-12-15T02:19:56.700 回答