2016-12-27 3 views
0

У меня есть простой Dóm повторения, как это:Polymer: несколько фильтров в шаблоне РОМ повторе

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

ответ

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 вы можете увидеть пример этого метода.

+0

Удивительный, спасибо большое! Только то, что мне было нужно. – Hubert

 Смежные вопросы

  • Нет связанных вопросов^_^