The following code taken from this demo works in my app:
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}}
时,它不起作用。
<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);
},
当我按显示按钮时,控制台会记录以下内容:
的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
中更新。 / p>
以下是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>
&#13;
答案 0 :(得分:2)
您需要删除额外的<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#dom-bind