仅限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 :)

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>