Polymer 1.x：如何使用 dataSource 函数过滤 iron-data-table？答案

【问题标题】：Polymer 1.x: How to use dataSource function to filter iron-data-table?Polymer 1.x：如何使用 dataSource 函数过滤 iron-data-table？
【发布时间】：2016-10-28 10:30:01
【问题描述】：

Here is the Plunk.

我想为<iron-data-tableas described in the accepted answer to this SO question实现dataSource过滤功能。我的问题是the docs here do not give an example of how to accomplish this。

最终，我希望在大型数据集上拥有一组复杂的过滤器（想想：控制面板）。

我曾尝试复制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的项目？

【问题讨论】：

标签： polymer polymer-1.0 plunker iron-data-table polymer-1.x

【解决方案1】：

dataSource 属性将函数作为值，因此最直接的方法是在父元素中定义函数属性并使用普通的 Polymer 绑定将其传递下去。

不幸的是，函数签名的定义不是很好，但在iron-data-table 演示页面中有一些示例：http://saulis.github.io/iron-data-table/demo/（远程数据示例）

我已经相应地更新了你的 Plunkr：http://plnkr.co/edit/VWIAvWAnuf2aiCjJjCdI?p=preview

【讨论】：

【解决方案2】：

为了完整起见，接受的答案中的代码如下：

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>

【讨论】：