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