weixin_33738555 2015-10-05 12:55 采纳率: 0%
浏览 36

仅限AJAX动态纸张标签

I've been working at this for a while, trying to get dynamic paper-tabs. Basically I have an array that's filled after an AJAX request, and I want to be able to add a new paper-tab then fill an iron-page div with some other content from the array, which might look like:

[{"Category":"Fruit", "Name":"Banana"}, 
 {"Category":"Fruit", "Name":"Apple"}, 
 {"Category":"Vegetable", "Name":"Potato"}]

So the section starts as...

<template is="dom-bind">
    <paper-tabs id="menuTabs" selected="{{selected}}">
    </paper-tabs>

    <iron-pages id="menuPages" selected="{{selected}}">
    </iron-pages>
</template>

And would end with something like...

<template is="dom-bind">
    <paper-tabs id="menuTabs" selected="{{selected}}">
        <paper-tab>Fruit</paper-tab>
        <paper-tab>Vegetable</paper-tab>
    </paper-tabs>

    <iron-pages id="menuPages" selected="{{selected}}">
        <div>Banana, Apple</div>
        <div>Potato</div>
    </iron-pages>
</template>

The dream is that maybe I can do this without a separate element by using a template or the Polymer DOM API, but I'm fairly new to Polymer so I could be completely missing the concept. I've tried just adding new paper-tab elements inside the paper-tabs element with JS after, but they end up in the wrong place in the DOM, and even then don't change iron-page. Any guidance is appreciated :)

  • 写回答

1条回答 默认 最新

  • weixin_33733810 2015-10-06 20:12
    关注

    Use a dom-repeat to loop through your list. Then you can populate the other elements with the array's values. https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind

    Custom element example:

    <dom-module id="test-element">
      <template is="dom-repeat" items="{{stuff}}">
        <paper-tabs id="menuTabs" selected="{{selected}}">
            <paper-tab>{{item.Category}}</paper-tab>
        </paper-tabs>
        <iron-pages id="menuPages" selected="{{selected}}">
            <div>{{item.Name}}</div>
        </iron-pages>
      </template>
      <script>
        Polymer({
          is: 'test-element',
          properties: {
            stuff:{
              type: Array,
              value: [{'Category':'Fruit', 'Name':'Banana'},
                  {'Category':'Fruit', 'Name':'Apple'},
                  {'Category':'Vegetable', 'Name':'Potato'}]
            }
        });
      </script>
    </dom-module>
    <test-element></test-element>
    

    dom-bind example (without custom element):

    <template id="t" is="dom-bind">
      <template is="dom-repeat" items="{{stuff}}">
        <paper-tabs id="menuTabs" selected="{{selected}}">
            <paper-tab>{{item.Category}}</paper-tab>
        </paper-tabs>
        <iron-pages id="menuPages" selected="{{selected}}">
            <div>{{item.Name}}</div>
        </iron-pages>
      </template>
      <script>
        var t = document.querySelector('#t');
        t.stuff=[{'Category':'Fruit', 'Name':'Banana'},{'Category':'Fruit', 'Name':'Apple'},{'Category':'Vegetable', 'Name':'Potato'}];
      </script>
    </template>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?