dynamically edit template of iron-list

Question

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

Answer 1

Here is one general answer, don't know if it will work for your case:

In Polymer, recommended way of manipulating the DOM is by manipulating the data, not by removeChild or appendChild.

For example,

• if you have list of users as: var users_array = [....];

create the iron-list as:

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

• adding and removing elements in users_array will affect the iron-list immediately.

Answer 2

Use a dom-if or use hidden inside the 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>