聚合物嵌套 dom-重复

Question

我在使用 Polymer 的 <dom-repeat> 时遇到了一些问题。

我有父对象（文件夹）和子对象（文件夹的内容）。两者都是根据对 AJAX 请求的响应计算得出的。

结果应该是这样的：

Folder

child

child

child

我的代码：

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

聚合物嵌套 dom-重复

Polymer nested dom-repeat

javascript

dom

repeater

polymer