问题
Here is the Plunk.
I want to implement the dataSource
filtering function for <iron-data-table
as described in the accepted answer to this SO question. My problem is the docs here do not give an example of how to accomplish this.
Eventually, I will want to have a complex set of filters (think: control panel) on a large data set of items.
I have tried copying the approach employed by dom-repeat
described in the docs here but without success.
<iron-data-table
items="[[users.results]]"
data-source="source(item)">
...
source: function(item) {
return item.user.name.first.length > 6;
},
How do I correctly implement the dataSource
property function to filter the items of <iron-data-table
?
回答1:
The dataSource
property takes a function as a value, so the most straight-forward way is to define a function property in your parent element and use normal Polymer bindings to pass that down.
The function signature isn't unfortunately very well defined, but there are some examples in the iron-data-table
demo pages: http://saulis.github.io/iron-data-table/demo/ (remote data example)
I've updated your Plunkr accordingly: http://plnkr.co/edit/VWIAvWAnuf2aiCjJjCdI?p=preview
回答2:
For completeness, the code in the accepted answer is as follows:
http://plnkr.co/edit/VWIAvWAnuf2aiCjJjCdI?p=preview<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-data-table/iron-data-table.html">
<dom-module id="content-el">
<template>
<style></style>
<iron-ajax
auto
url="https://saulis.github.io/iron-data-table/demo/users.json"
last-response="{{users}}">
</iron-ajax>
<iron-data-table
data-source="[[dataSource]]">
<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>
<script>
(function() {
'use strict';
Polymer({
is: 'content-el',
properties: {
users: Array,
dataSource: Function
},
observers: ['_usersChanged(users)'],
_usersChanged: function(users) {
this.dataSource = function(params, callback) {
var filteredUsers = users.results.filter(function(item) {
return item.user.name.first.length > 6;
});
callback(filteredUsers, filteredUsers.length);
};
}
});
})();
</script>
</dom-module>
来源:https://stackoverflow.com/questions/40250746/polymer-1-x-how-to-use-datasource-function-to-filter-iron-data-table