ポリマー：テンプレートDOM-繰り返しで複数のフィルタ

Question

私はこのような単純なDOMリピートあります

<template is="dom-repeat" items="{{projects}}" as="project" filter="{{computeFilter(searchString)}}"> 
[[project.name]] - [[project.number]] 
</template> 

<paper-input name="filter-name" label="Filter by project name" value="{{searchString}}"></paper-input> 

を、名前でプロジェクトをフィルタリングする機能があります：

computeFilter: function(keyword) { 
    if (!keyword) { 
    return null; 
    } else { 
    keyword = keyword.toLowerCase(); 
    return function(project) { 
     var name = project.name.toLowerCase(); 
     return (name.indexOf(keyword) != -1); 
    }; 
    } 
} 

すべて良いです。さて、別のフィルタを追加するにはどうすればいいですか？たとえば、プロジェクト番号でフィルターをかけたいのですが？

{{searchString2}}にバインドする別の用紙ボタンがありますが、これをフィルタにリンクするとどうなりますか。つまり、dom-repeatで複数のフィルタを設定するにはどうすればいいですか？

Answer 1

複数のフィルタを使用してdom-repeatをフィルタリングする方法があります。

まず、ここではテンプレートです：

<paper-input name="filter-name" label="Filter by project name" value="{{filterText::input}}"></paper-input> 
<paper-input name="filter-name" label="Filter by project type" value="{{filterText2::input}}"></paper-input> 
<template id="resultList" is="dom-repeat" items="{{ projects }}" filter="filterProject" as="project"> 
    <div> 
    [[project.name]] - [[project.number]] 
    </div> 
</template> 

あなたは各フィルタのためのフィルタをリフレッシュするオブザーバを定義する必要があります。

this.$.resultList.render(); 

その後、あなたはあなたのフィルタをフィルタ機能を使用する必要がありますに：

filterProject: function(item) { 
    return (this.filterText && item.name.match(new RegExp(this.filterText, 'i'))) || 
     (this.filterText2 && item.name.match(new RegExp(this.filterText2, 'i'))); 
    }, 

Hereこのメソッドの例を見ることができます。