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>
But when I change the data source from an iron-ajax
call to an internal data binding {{items}}
, it does not work.
<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>
I expect the table to populate with data. Instead, the table and column headers render but the data does not populate the table.
A couple of points:
I am using Firebase to store the data. And the polymerfire/firebase-query
element (in the shown element's parent databound element) to fetch the {{items}}
data.
What direction should I head to try to solve this?
Edit
The following describes how and what I am setting to the items
variable:
The data structure inside my Firebase is as follows.
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
I pull that data into my app via Polymerfire firebase-query
element in a parent element.
<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>
I know the {{items}}
data is making its way to the list-items
element because I set up a button to log the data to the console.
<button on-tap="show">Show</button>
show: function() {
console.log('items', this.items);
},
When I press the Show button, the console logs the following:
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
Interestingly enough, when I log the same information for the working code example:
show: function(){
console.log('users', this.users);
}
I get:
console.logusers undefined
Go figure. Obviously, there is something I'm not understanding. Looks like the {{items}}
databinding is registering after the iron-data-table
renders and, for some reason, the databinding is not updating in the iron-data-table
after it registers in the iron-list
element.
Edit2
Here is the entire dom-module
definition of the items-list
element.
<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>
You need to remove the extra
<template is="dom-bind">
element, it's encapsulating the<iron-data-table>
in a separate binding scope.dom-bind
isn't needed because you have a binding scope from thedom-module
I assume you copied the
dom-bind
elements from the demo examples, where they are needed because there isn't a custom element wrapped around the<iron-data-table>
. You can see more info on that here: https://www.polymer-project.org/1.0/docs/devguide/templates#dom-bind