Polymer recursive template binding

Question

I'm struggling having to migrate a custom element that used a recursive template binding in Polymer 0.5. The custom element's HTML code was like:

<template>
    <template bind="{{ items }}" id="t">
        <section id="{{ id }}"  appName="{{ id }}">
             <template ref="t" repeat="{{ children }}"></template>
        </section>
    </template> 
</template>

How could I write the same construct in Polymer 0.9? if the feature is not supported yet, are there plans to include it in Polymer's future versions?

Thanks

Answer 1

You can include a custom element inside of itself:

my-recursive.html

<link rel="import" href="../polymer/polymer.html">

<dom-module id="my-recursive">
  <template>
    <template is="dom-repeat" items="{{data}}">
      <section id="{{item.id}}" appName="{{item.id}}">
        <my-recursive data="{{item.children}}"></my-recursive>
      </section>
    </template>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-recursive'
  });
</script>

index.html

<my-recursive
  data='[{"id":1,"name":"top1","children":[{"id":3,"name":"mid1","children":[]},{"id":5,"name":"mid3","children":[]}]},{"id":2,"name":"top2","children":[{"id":4,"name":"mid2","children":[]}]}]'
></my-recursive>