Question

我已经在这方面工作了一段时间，试图获得动态的纸质标签。基本上我有一个在AJAX请求之后填充的数组，我希望能够添加一个新的纸质标签，然后用数组中的其他内容填充铁页div，这可能看起来像：

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

所以该部分以......开头。

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

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

并会以......之类的结尾。

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

我的梦想是，通过使用模板或Polymer DOM API，我可以在没有单独元素的情况下做到这一点，但我对Polymer来说相当新，所以我可能完全错过了这个概念。我曾经尝试过使用JS在paper-tabs元素中添加新的paper-tab元素，但是它们最终会在DOM中的错误位置，甚至不会更改iron-page。任何指导意见表示赞赏：）

Answer 1

使用dom-repeat循环浏览列表。然后，您可以使用数组的值填充其他元素。 https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind

自定义元素示例：

<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示例（没有自定义元素）：

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

AJAX只有动态纸质标签

1 个答案: