Polymer 1.x: Как использовать функцию dataSource для фильтрации таблицы данных железа?

Question

Here is the Plunk.

Я хочу реализовать функцию фильтрации dataSource для <iron-data-tableas described in the accepted answer to this SO question. Моя проблема: the docs here do not give an example of how to accomplish this.

В конце концов, я хочу иметь комплексный набор фильтров (думаю: панель управления) на большом наборе данных.

Я пробовал копировать подход, используемый dom-repeatdescribed 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?

Answer 1

Свойство dataSource принимает функцию как значение, поэтому наиболее прямолинейный способ состоит в том, чтобы определить свойство функции в вашем родительском элементе и использовать обычные связки Полимера, чтобы передать это.

Функции подпись к сожалению, не очень хорошо определена, но есть некоторые примеры в iron-data-table демо-странице: http://saulis.github.io/iron-data-table/demo/ (удаленный пример данных)

Я обновил свой Plunkr соответственно: http://plnkr.co/edit/VWIAvWAnuf2aiCjJjCdI?p=preview

Answer 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>