聚合物递归模板绑定

Question

我正在努力迁移一个在 Polymer 0.5 中使用递归模板绑定的自定义元素。自定义元素的 HTML 代码如下：

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

如何在 Polymer 0.9 中编写相同的结构？如果还不支持该功能，是否计划将其包含在 Polymer 的未来版本中？

谢谢

Answer 1

您可以在其内部包含自定义元素：

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

聚合物递归模板绑定

Polymer recursive template binding

recursion

polymer