<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按钮时,控制台会记录以下内容:
控制台日志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);
}
我得到:
控制台日志users 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>