聚合物纸标签以编程方式选择第一个标签

我们的纸标签是动态生成的，我们如何在默认情况下选择第一个标签并激发更改事件，以便看到铁质页面内容。聚合物纸标签以编程方式选择第一个标签

<paper-tabs id="scrollableTabs" selected={{selected}} scrollable > 
    <template is="dom-repeat" items="[[liveQueues]]" as="queue" > 
    <paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab> 
    </template> 
</paper-tabs> 


list: function() { 

     this.loading=!this.loading; 
     this.$.list.url = "http://apicall"; 
     var tmp = this.$.list.generateRequest(); 
     console.log(tmp) 

    },

这个脚本获取由API

<iron-pages selected="{{selected}}"> 
    <template is="dom-repeat" items="[[liveQueues]]" as="queue" > 
    <paper-material elevation="1"> 
     <iron-list items="[[queueTokens]]" as="token"> 
      <template> 
      <div> 
       <div class="item" tabindex="0"> 
       <span class="avatar" >[[token.tokenNumber]]</span> 
       <a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}"> 
        <div class="pad"> 
        <div class="primary">[[token.userName]]</div> 
        <div class="secondary">[[token.userMobile]]</div> 
        <div class="secondary dim">[[token.notes]]</div> 
         <div class="secondary dim">[[token.joinTime]]</div> 
        </div> 
       </a> 
       <iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon> 
       </div> 
      </div> 
      </template> 
     </iron-list> 
    </paper-material> 
    </template> 
</iron-pages>

来源

2015-10-07 user160108

它们是否在重复模板中生成？有什么方法可以知道世代完成了吗？代码片段会有所帮助。 – Maria

@Maria它们是在一个重复模板中生成的，我已经添加了代码片段 – user160108

事件将触发每次DOM重复的变化选项卡的内容。您可以听取更改并将其设置为0.

<template is="dom-repeat" items="[[liveQueues]]" as="queue" on-dom-change="setSelected">

在您的原型中定义函数。

setSelected: function() { 
    this.$.scrollableTabs.selected = 0; 
}

注意函数被调用每次更新liveQueues，你可能不希望每次都重新设置标签的时间。如果您的数据绑定到selected，则铁页应该自动更新。

来源

2015-10-07 07:57:04 Maria

Hi @maria这真的很有帮助，我只是有另一个问题选项卡被选中。我还使用另一个ID来选择熨斗页面，如 this。$ .scrollablePages.selected = 0; 但加载列表的铁列表不可见。 – user160108

如果您使用数据绑定，则不必在页面中设置所选内容。看看[这个简单的闯入者]（http://plnkr.co/edit/K59phuCAbtLR10ltLp28?p=preview）。请注意，plunker只适用于Chrome，但如果您在自己的机器上托管示例，它也应该在其他浏览器中运行。填充按钮模拟异步到达的数据并添加选项卡。 – Maria

嗯，我认为ready函数是初始化的方法！

ready: function() { 
    this.selected = 0; 
}

来源

2016-06-24 12:10:07

聚合物纸标签以编程方式选择第一个标签

回答

相关问题