僅限AJAX動態紙張標簽

Question

我已經為此工作了一段時間，試圖獲得動態的紙張標簽。 基本上，我有一個在AJAX請求后要填充的數組，並且我希望能夠添加一個新的paper-tab，然后用該數組中的其他一些內容填充Iron-page 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>