1

At first, i know, there are many questions about iron-list. But mostly about editing items and not whole template inside iron-list..

My code is really extremely complicated and posting it is pointless. I am working on data-tables which are using iron-list. I have element called diamond-listing and inside this diamond-listing i have iron-list.

You can image this like: Parent element define <template> with some content inside it, and child element (diamond-listing) will render this template as a table

Of course diamond-listing is used multiple times in my application and always with different template. For example: page users have columns with userID, userName etc.. and on page stations there are columns stationID, address etc.. with different number of columns. Every pagea has it's own <template> which i am trying to propagate to diamond-listing. For example:

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

What i managed to do is to make it work in shadow dom using <slot> and simply rewrite <template> inside <iron-list>, but here we are.. For example using Firefox, which doesn't support webcomponents, there isn't <template> as a child of <iron-list> (because there is no shadow-dom) so there is no way how to update <template> and render iron-list.

What i tried:

1) Find template inside iron-list and use removeChild and appendChild functions.

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

Without success.

2) Define in HTML empty iron-list without any template inside it. And then in javascript add template dynamically. Without success. ( iron-list is crying it requires template)

3) Create dynamically iron-list using 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";

result: same as 2) ...

Is there a way, how to update template which is used to render all items in iron-list?

Or create iron-list with defined template inside JS ?

Or somehow do it with dom-repeat ? I won't have more than 10 items in listing, since it's fully pagination listing. ( this is propably simplest solution, but i don't know how to render <template> for every iteration

4

2 回答 2

0

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

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

例如，

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

创建铁列表为：

<iron-list date="users_array">
  <template>
  ...
  <template>
</iron-list>
  • 在 users_array 中添加和删除元素将立即影响 iron-list。
于 2017-04-28T08:54:55.843 回答
0

在. _ dom-if_hiddeniron-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>
于 2017-05-01T23:20:53.497 回答