Динамически редактировать шаблон железного списка

Question

Во-первых, я знаю, что есть много вопросов о железном списке. Но в основном это касается редактирования элементов, а не целого шаблона в железном списке.

Мой код действительно очень сложный, и публиковать его бессмысленно. Я работаю над таблицами данных, которые используют iron-list, У меня есть элемент под названием diamond-listing и внутри этого diamond-listing я имею iron-list,

Вы можете изобразить это как: определение родительского элемента <template> с некоторым содержанием внутри него, и дочерний элемент (diamond-list) будет отображать этот шаблон в виде таблицы

Конечно diamond-listing используется несколько раз в моем приложении и всегда с другим шаблоном. Например: у пользователей страницы есть столбцы с userID, userName и т. Д., А на страницах станций есть столбцы stationID, адрес и т. Д. С разным количеством столбцов. У каждой страницы есть своя <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> и просто переписать <template> внутри <iron-list>, но здесь мы.. Например, используя Firefox, который не поддерживает веб-компоненты, нет <template> как ребенок <iron-list> (потому что нет теневого дома) так что нет способа как обновить <template> и сделать железный список.

Что я попробовал:

1) Найти шаблон внутри Iron-List и использовать removeChild а также appendChild функции.

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

Безуспешно.

2) Определить в HTML пустой железный список без какого-либо шаблона внутри него. А затем в JavaScript добавить шаблон динамически. Безуспешно. (Iron-List плачет, требуется шаблон)

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?

Или как-то сделать это с дом-повтором? У меня не будет более 10 наименований в списке, поскольку он полностью разбит на страницы. (это, вероятно, самое простое решение, но я не знаю, как сделать <template> за каждую итерацию

Answer 1

Использовать 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>

Answer 2

Вот один общий ответ, не знаю, будет ли это работать для вашего случая:

В Polymer рекомендуемый способ манипулирования DOM - манипулирование данными, а не removeChild или appendChild.

Например,

• если у вас есть список пользователей как: var users_array = [....];

создайте железный список как:

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

• добавление и удаление элементов в users_array немедленно повлияет на список железа.