我在我的rails应用程序中使用聚合物铁页和纸标签.问题是在点击其中一个纸张标签之前没有显示任何页面.我想在没有用户交互的情况下默认选择铁页中的第一页.
我已将两个纸标签和铁页放在< 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>
解决方法
由于您正在使用自动绑定模板,只需添加一个简短的脚本来设置< 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>
