Iron-data-table не может заполнить данные из привязки данных

Question

Следующий код, взятый из этой демонстрации, работает в моем приложении:

https://saulis.github.io/iron-data-table/demo/index.html

<template is="dom-bind">
  <iron-ajax
      url="https://saulis.github.io/iron-data-table/demo/users.json"
      last-response="{{users}}"
      auto>
  </iron-ajax>
  <iron-data-table id="items"
                   selection-enabled 
                   items="[[users.results]]">
    <data-table-column name="Picture" width="50px" flex="0">
      <template>
        <img src="[[item.user.picture.thumbnail]]">
      </template>
    </data-table-column>
    <data-table-column name="First Name">
      <template>[[item.user.name.first]]</template>
    </data-table-column>
    <data-table-column name="Last Name">
      <template>[[item.user.name.last]]</template>
    </data-table-column>
    <data-table-column name="Email">
      <template>[[item.user.email]]</template>
    </data-table-column>
  </iron-data-table>
</template>

Но когда я меняю источник данных из iron-ajax вызов внутренней привязки данных {{items}}, это не работает.

детал-list.html

<template is="dom-bind">
  <iron-data-table id="items"
                   selection-enabled
                   data-source="[[items]]">
    <data-table-column name="Comment" width="50px" flex="0">
      <template>[[item.comment]]</template>
    </data-table-column>
    <data-table-column name="Total">
      <template>[[item.total]]</template>
    </data-table-column>
    <data-table-column name="Merchant">
      <template>[[item.merchant]]</template>
    </data-table-column>
  </iron-data-table>
</template>

Я ожидаю, что таблица заполнится данными. Вместо этого отображаются заголовки таблицы и столбца, но данные не заполняют таблицу.

Пара моментов: я использую Firebase для хранения данных. И polymerfire/firebase-query элемент (в родительском элементе данных показанного элемента), чтобы получить {{items}} данные.

В каком направлении я должен идти, чтобы попытаться решить эту проблему?

редактировать

Ниже описано, как и что я устанавливаю для items переменная:

Структура данных внутри моей Firebase выглядит следующим образом.

https://console.firebase.google.com/project/my-app/database/data

my-app
 |
 - users
    |
    - userid-123
       |
       - nodeid-abc
       |  |- comment: "foo"
       |  |- merchant: "bar"
       |  |- date: "2016-07-02"
       |  |- total: 123
       - nodeid-xyx
          |- comment: "baz"
          |- merchant: "bat"
          |- date: "2016-07-15"
          |- total: 999

Я загружаю эти данные в свое приложение через Polymerfire firebase-query элемент в родительском элементе.

Обзор-page.html

<firebase-query
    id="query"
    app-name="my-app"
    path="/users/[[user.uid]]"
    data="{{items}}">
</firebase-query>
<items-list id="list"
    items="[[items]]"
    filters="[[filters]]">
</items-list>

Я знаю {{items}} данные пробиваются к list-items элемент, потому что я настроил кнопку для записи данных на консоль.

детал-list.html

<button on-tap="show">Show</button>
show: function() {
  console.log('items', this.items);
},

Когда я нажимаю кнопку Показать, консоль записывает следующее:

console.log

items
0: Object
   $key: "nodeid-abc"
   comment: "foo"
   merchant: "bar"
   date: "2016-07-02"
   total: 123
1: Object
   $key: "nodeid-xyx"
   comment: "baz"
   merchant: "bat"
   date: "2016-07-15"
   total: 999

Интересно, что когда я регистрирую ту же информацию для примера с рабочим кодом:

show: function(){
  console.log('users', this.users);
}

Я получил:

console.log

users undefined

Пойди разберись. Очевидно, что-то я не понимаю. Выглядит как {{items}} привязка данных регистрируется после iron-data-table рендеринга, и по какой-то причине привязка данных не обновляется в iron-data-table после того, как он регистрируется в iron-list элемент.

Edit2

Вот весь dom-module определение items-list элемент.

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-data-table/iron-data-table.html">
<link rel="import" href="../bower_components/iron-data-table/default-styles.html">

<dom-module id="items-list">
  <template>
    <button on-tap="show">Show</button>
    <template is="dom-bind">
      <iron-data-table items="[[items]]">
        <data-table-column name="Comment">
          <template>[[item.comment]]</template>
        </data-table-column>
        <data-table-column name="Merchant">
          <template>[[item.merchant]]</template>
        </data-table-column>
      </iron-data-table>
    </template>
  </template>
  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'items-list',
        properties: {
          items: {
            type: Array,
            notify: true,
          },
        },
        show: function() {
          console.log('items', this.items);
        },
      });
    })();
  </script>
</dom-module>

Answer 1

Вам нужно удалить лишние <template is="dom-bind"> элемент, он инкапсулирует <iron-data-table> в отдельной обязательной области. dom-bind не требуется, потому что у вас есть область привязки из dom-module

Я полагаю, вы скопировали dom-bind элементы из демонстрационных примеров, где они необходимы, потому что нет пользовательского элемента, обернутого вокруг <iron-data-table>, Вы можете увидеть больше информации об этом здесь: https://www.polymer-project.org/1.0/docs/devguide/templates