<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}}と、機能しません。
<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/datamy-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
<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
<button on-tap="show">Show</button>
show: function() {
console.log('items', this.items);
},
ボタンをShow押すと、コンソールに次のログが記録されます。
console.logitems
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.logusers undefined
図に行きます。明らかに、私が理解していないことがあります。{{items}}レンダリング後にデータバインディングが登録されているように見えますがiron-data-table、何らかの理由で、データバインディングが要素iron-data-tableに登録された後に更新されていません。iron-list
編集2
要素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>