聚合物嵌套dom-repeat

Question

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