动态编辑 iron-list 模板

Question

首先，我知道，关于 Iron-list 有很多问题。但主要是关于编辑项目而不是铁列表中的整个模板..

我的代码非常复杂，发布它毫无意义。我正在处理使用iron-list 的数据表。我有一个名为diamond-listing 的元素，在这个diamond-listing 里面我有iron-list。

你可以像这样：父元素定义<template>，里面有一些内容，子元素（钻石列表）会将此模板呈现为表格

当然diamond-listing 在我的应用程序中被多次使用并且总是使用不同的模板。例如：页面用户有带有用户ID、用户名等的列。在页面站上有列站ID、地址等。具有不同数量的列。每个 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>

我设法做的是使用<slot> 使其在shadow dom 中工作，并在<iron-list> 中简单地重写<template>，但我们在这里.. 例如使用不支持webcomponents 的Firefox，那里不是<template> 作为<iron-list> 的孩子（因为没有shadow-dom）所以没有办法更新<template> 并渲染iron-list。

我尝试了什么：

1) 在 iron-list 中找到模板并使用 removeChild 和 appendChild 函数。

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

没有成功。

2) 在 HTML 中定义空的 iron-list，其中没有任何模板。然后在javascript中动态添加模板。没有成功。 （iron-list 哭了需要模板）

3) 使用document.createElement动态创建iron-list

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

有没有办法，如何更新用于渲染iron-list 中所有项目的template？

或者在 JS 中使用定义的模板创建 iron-list ？

或者以某种方式用 dom-repeat 做到这一点？我不会列出超过 10 个项目，因为它是完全分页列表。 （这可能是最简单的解决方案，但我不知道如何为每次迭代渲染<template>

Answer 1

这是一个通用答案，不知道它是否适用于您的情况：

在 Polymer 中，推荐的操作 DOM 的方法是操作数据，而不是通过 removeChild 或 appendChild。

例如，

• 如果您的用户列表为：var users_array = [....];

创建铁列表为：

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

• 在 users_array 中添加和删除元素会影响 iron-list 立即。

Answer 2

使用dom-if 或在iron-list 中使用hidden。

<iron-list items="[[items]]">
  <template>
    <template is="dom-if" if="[[item.isType1]]">
      <!-- item1 -->
    </template>
    <template is="dom-if" if="[[item.isType2]]">
      <!-- item2 -->
    </template>
  </template>
</iron-list>