動態編輯鐵名單模板

Question

首先，我知道，關於鐵名單有很多問題。但主要是關於編輯項目，而不是整個模板內鐵列表。

我的代碼是非常複雜，發佈它是毫無意義的。我正在使用使用iron-list的數據表。我有元素diamond-listing，在diamond-listing裏面我有iron-list。

您可以像這個像：父元素定義<template>與它裏面的一些內容，和子元素（金剛石上市）會使這個模板爲表

當然diamond-listing是在多次使用我的應用程序和總是與不同的模板。例如：頁面用戶具有用戶ID，用戶名等列，在頁面上有列stationID，地址等，列數不同。每個pagea都有自己的<template>，我正在試圖傳播到diamond-listing。例如：

<diamond-listing as="user" id="permissionsTable" type="pagination" pagination-items-per-page="6" header-data="{{headerData}}" address="/user/" loading="{{loading}}"> 
     <div id="test" slot="content"> 
      <template> 
       <div class="diamond-row" on-tap="_openUrl" info$="/user/[[user.id]]"> 
        <diamond-item text="{{user.username}}"></diamond-item> 
        <diamond-item text="{{user.partner.name}}"></diamond-item> 
       </div> 
      </template> 
     </div> 
    </diamond-listing> 

什麼我設法做的是讓它在影子DOM使用<slot>工作，簡單地改寫<template>內<iron-list>，但我們在這裏。例如使用Firefox，不支持webcomponents，有沒有<template>作爲<iron-list>（因爲沒有影子）的孩子，所以沒有辦法如何更新<template>和呈現鐵列表。

我的嘗試：

1）裏面找到鐵列表模板，並使用removeChild和appendChild功能。

var test = this.querySelector("#test template"); 
this.$$("#diamondList").removeChild(this.$$("#diamondList template")); 
this.$$("#diamondList").appendChild(test); 

沒有成功。

2）定義在HTML空鐵列表裏面沒有任何模板。然後在JavaScript中動態添加模板。沒有成功。 （鐵名單哭它需要模板）

3）創建使用document.createElement

var test = this.querySelector("#test template"); 
var list = document.createElement("iron-list"); 
list.appendChild(test); 
list.as = this.as; 
list.items = [{"username":"test","partner":{"name":"Test partner","id":1}}]; 
list.id = "diamondList"; 

結果動態鐵名單：同2）...

有沒有一種方法，如何更新template它用於渲染iron-list中的所有項目？

或者用JS裏面定義的模板創建iron-list？

或以某種方式與dom重複？由於完全分頁列表，因此我將不會有超過10個物品在列表中。 （這是最簡單的propably解決，但我不知道如何渲染<template>每次迭代

Answer 1

這裏是一個籠統的回答，不知道它是否會爲你的情況下工作：

聚合物，推薦操縱DOM的方式是通過操作數據，而不是通過removeChild或appendChild。

例如，

• 如果有用戶的列表爲：VAR users_array = [...];

創建鐵名單爲：

<iron-list date="users_array"> 
    <template> 
    ... 
    <template> 
</iron-list> 

• 添加和刪除元素users_array將立即影響到鐵列表 。