聚合物嵌套多态重复

Question

我对聚合物的<dom-repeat>有一些麻烦。

我有父对象(文件夹)和子对象(文件夹的内容)。这两种方法都是根据对AJAX请求的响应计算的。

其结果应该是：

文件夹

• 孩子
• 孩子
• 孩子

我的代码：

<iron-ajax id="folder" url="../Folder" auto last-response="{{folders}}"></iron-ajax>

<template is="dom-repeat" items="{{folders.items}}" as="folder">
  <paper-card  on-tap="openFolder" object item="[[folder]]">

    <custom-object value="[[folder]]" link></custom-object>
     
    <iron-ajax id="folder" url="..[[folder.id]]/children" auto last-response="{{children}}"></iron-ajax>

    <template is="dom-repeat" items="{{children.items}}" as="children"> 
      <custom-object style="margin-top: 15px" value="[[children]]" link></custom-object>
    </template>

  </paper-card>
</template>

问题是每个文件夹都成为最后一个文件夹的子文件夹，而不是自己的文件夹。

Answer 1

在中继器的每次迭代中，您的内部iron-ajax都会写入相同的children属性。中继器不对该属性进行范围设置，它实际上对每个迭代和中继器外的整个模板都是可见的。很可能后续的迭代正在覆盖上一次迭代的children，这显示为文件夹的意外嵌套。

解决这一问题的一种方法是将children属性附加到迭代器(在本例中为folder )。为了避免名称与实际属性发生冲突，最好在其前缀(例如folder._children)上加上前缀，如本例所示：

<iron-ajax id="folder" url="../Folder" auto last-response="{{folders}}"></iron-ajax>

<template is="dom-repeat" items="{{folders.items}}" as="folder">
  <paper-card  on-tap="openFolder" object item="[[folder]]">

    <custom-object value="[[folder]]" link></custom-object>


    <!--
        attach a new property `_children` to `folder` to contain the response for this folder
    -->
    <iron-ajax url="..[[folder.id]]/children" auto last-response="{{folder._children}}"></iron-ajax>


    <template is="dom-repeat" items="{{folder._children.items}}" as="children"> 
      <custom-object style="margin-top: 15px" value="[[children]]" link></custom-object>
    </template>
  </paper-card>
</template>