Question

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

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

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

当然diamond-listing在我的应用程序中多次使用，并且始终使用不同的模板。例如：页面用户具有userID，userName等列。在页面站上有列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>

我设法做的是使用<slot>使其在阴影dom中工作，只需在<template>内重写<iron-list>，但这里我们是..例如使用Firefox，它不会不支持webcomponents，<template>的孩子没有<iron-list>（因为没有影子dom）所以没有办法更新<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中创建定义模板的铁列表？

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

Answer 1

以下是一般性答案，不知道它是否适用于您的案例：

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

例如，

如果您有以下用户列表：var users_array = [....];

创建铁列表：

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

在users_array中添加和删除元素会影响铁列表立即

Answer 2

使用dom-if或使用hidden内的iron-list。

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

动态编辑铁列表

2 个答案: