Polymer 1.x:如何使用dataSource函数过滤iron-data-table?
Polymer 1.x: How to use dataSource function to filter iron-data-table?
我想为<iron-data-table
. My problem is the docs here do not give an example of how to accomplish this实现dataSource
过滤功能。
最终,我希望在大型项目数据集上有一组复杂的过滤器(想想:控制面板)。
我尝试复制 dom-repeat
described in the docs here 所采用的方法,但没有成功。
http://plnkr.co/edit/cGykY65HWnK4pIQ0qx8O?p=preview
<iron-data-table
items="[[users.results]]"
data-source="source(item)">
...
source: function(item) {
return item.user.name.first.length > 6;
},
如何正确实现 dataSource
属性 函数来过滤 <iron-data-table
的项目?
dataSource
属性 将函数作为值,因此最直接的方法是在父元素中定义一个函数 属性 并使用普通的 Polymer 绑定来传下来。
不幸的是,函数签名没有很好地定义,但是 iron-data-table
演示页面中有一些示例:http://saulis.github.io/iron-data-table/demo/(远程数据示例)
我已经相应地更新了您的 Plunkr:http://plnkr.co/edit/VWIAvWAnuf2aiCjJjCdI?p=preview
为了完整起见,接受的答案中的代码如下:
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>
我想为<iron-data-table
dataSource
过滤功能。
最终,我希望在大型项目数据集上有一组复杂的过滤器(想想:控制面板)。
我尝试复制 dom-repeat
described in the docs here 所采用的方法,但没有成功。
<iron-data-table
items="[[users.results]]"
data-source="source(item)">
...
source: function(item) {
return item.user.name.first.length > 6;
},
如何正确实现 dataSource
属性 函数来过滤 <iron-data-table
的项目?
dataSource
属性 将函数作为值,因此最直接的方法是在父元素中定义一个函数 属性 并使用普通的 Polymer 绑定来传下来。
不幸的是,函数签名没有很好地定义,但是 iron-data-table
演示页面中有一些示例:http://saulis.github.io/iron-data-table/demo/(远程数据示例)
我已经相应地更新了您的 Plunkr:http://plnkr.co/edit/VWIAvWAnuf2aiCjJjCdI?p=preview
为了完整起见,接受的答案中的代码如下:
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>