javascript - Polymer 1.0，如何实现无限嵌套的dom-repeat

Question

我有以下 JSON 对象，

    categoryList = [{
    "title": "Computers",
    "categories": 
    [
      {
        "title": "Laptops",
        "categories": 
        [
          {
            "title": "Ultrabooks",
            "categories": 
            [
              {
                "title": "Lenovo",
                "categories": 
                [
                  {
                    "title": "i5 intel"
                  }
                ]
              }
            ]
          },
          {
            "title": "Dell"
          },
          {
            "title": "Macbooks",
            "categories": 
            [
              {
                "title": "Air"
              }, 
              {
                "title": "Pro"
              }
            ]
          }
        ]
      }, 
      {
        "title": "Desktops"
      }, 
      {
        "title": "Tablets",
        "categories": 
        [
          {
            "title": "Apple"
          }, 
          {
            "title": "Android"
          }
        ]
      }, 
      {
        "title": "Printers"
      }
    ]
  }]

正如您所看到的，每个类别都可以有一个子类别，因此它实际上可以永远持续下去。我试图显示所有这些，但我不知道如何做到这一点。

这就是我到目前为止所拥有的一切(显然这只能获得每个类别中的第一个 child ):

<template is="dom-repeat" items="{{categoryList}}" as="category">  
  <template is="dom-if" if="{{_hasData(category.categories)}}">
      <div>{{category.title}}</div>
      <template is="dom-repeat" items="{{category.categories}}" as="item">
         <div>{{item.title}}</div>
      </template>
  </template>
</template>

Answer 1

您可以在此处使用类似递归代码的内容。 Here's一个同样的笨蛋。

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="infinite-repeat">
  <template>
    <template is="dom-repeat" items={{categories}} as="category">
      <div>{{category.title}}</div>
      <template is="dom-repeat" items="{{category.categories}}" as="item">
        <div>{{item.title}}</div>
        <template is="dom-if" if="{{_hasData(item.categories)}}">
          <infinite-repeat categories={{item.categories}}></infinite-repeat>
        </template>
      </template>
    </template>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'infinite-repeat',
    properties: {
      categories: {
        type: Array,
        value: function() {
          return [{
            "title": "Computers",
            "categories": [{
              "title": "Laptops",
              "categories": [{
                "title": "Ultrabooks",
                "categories": [{
                  "title": "Lenovo",
                  "categories": [{
                    "title": "i5 intel"
                  }]
                }]
              }, {
                "title": "Dell"
              }, {
                "title": "Macbooks",
                "categories": [{
                  "title": "Air"
                }, {
                  "title": "Pro"
                }]
              }]
            }, {
              "title": "Desktops"
            }, {
              "title": "Tablets",
              "categories": [{
                "title": "Apple"
              }, {
                "title": "Android"
              }]
            }, {
              "title": "Printers"
            }]
          }];
        }
      }
    },
    _hasData: function(item) {
      return item && item.length > 0;
    }
  })
</script>

<infinite-repeat></infinite-repeat>