Dart Polymer：如何在repeat-template中过滤元素？ [英] Dart Polymer: How to filter elements in repeat-template?

问题描述

我使用Dart Polymer的重复模板来显示列表的项目。现在，我想实现一个搜索过滤器，其中只显示与所键入的搜索项相关的项目。请考虑以下代码：

my-element.html

 < polymer-element name =my-element> 
< script type =application / dartsrc =my-element.dart>< / script> 
< template> 
< input type =textvalue ={{searchTerm}}> 
< ul> 
< template repeat ={{item in items}}> 
< template if ={{matchesSearchFilter（item）}}> 
< li> {{item}}< / li> 
< / template> 
< / template> 
< / ul> 
< / template> 
< / polymer-element> 
  

my-element.dart

class MyElement extends PolymerElement {
@observable List< String> items = toObservable（[Monday，Tuesday，Wednesday]）;
@observable String searchTerm ='';

MyElement.created（）：super.created（）;

matchesSearchFilter（String item）{
if（searchTerm.isEmpty）return true;
return item.toLowerCase（）。contains（searchTerm.toLowerCase（））;
}
}

例如，当我在文本框，我希望项目列表自动更新，以便只显示星期一。

那么，如何正确地实现这样的功能？

解决方案

第二种方法是添加一个过滤器：

 < template repeat ={{item in items | filter（searchTerm）}}> 
< li> {{item}}< / li> 
< / template> 
  

和

  //一行
 filter（term）=> （items）=> term.isEmpty？ items：items.where（（item）=> item.toLowerCase（）。contains（searchTerm.toLowerCase（）））。 
  

在重复循环中使用之前，项目将被过滤。
我个人更喜欢使用过滤器而不是Günter的解决方案，因为：

- 很容易

- 集中式

- 很容易添加其他过滤器与管道操作符

- 您的列表未更改（仅过滤）

例如，假设您还希望对项目进行排序。然后只需添加另一个过滤器：

 < template repeat ={ （searchTerm）| sort（sortField，sortAsc）}}> 
< li> {{item}}< / li> 
< / template> 
  

您的项目将被过滤，然后排序（每次searchTerm，sortField或sortAsc更改）。简单; - ）

最后一个提示：以前的代码将在每次击键过滤你的列表，这不是很方便用户！

您可以使用这种代码：

 现在我在searchFilter上过滤项目，而不是在searchTerm上过多项
< template repeat ={{items in items | filter（searchFilter）| sort（sortField，sortAsc）}}> 
< li> {{item}}< / li> 
< / template> 
  

然后在您的班级

类MyElement扩展PolymerElement {
 
 @observable List< String> items = toObservable（[Monday，Tuesday，Wednesday]）; 
 @observable String searchTerm =''; 
 @observable String searchFilter =''; 
 
 MyElement.created（）：super.created（）; 
 
 filter（term）=> （items）=> term.isEmpty？ items：items.where（（item）=> item.toLowerCase（）。contains（searchTerm.toLowerCase（）））。 
 
 //当用户击键时，searchTerm被改变
 //启动一个定时器（如果定时器不是null，那么停止它：这意味着用户还没有完成
 / /当延迟过去然后设置searchFilter与searchTerm 
 //由于您的过滤器使用'filter（searchFilter）'，那么你的项目将被过滤
 Timer _searchTimer; 
 searchTermChanged（oldValue）{
 //如果在延迟期间有另一次击键，则重置它
 if（_searchTimer！= null）_searchTimer.cancel（）; 
 new Timer（new Duration（milliSeconds：300）， > searchFilter = searchTerm）; 
} 
} 
  

I'm using the repeat template of Dart Polymer to show the items of list. Now, I would like to implement a search filter, where only the items are displayed, which relates to the typed search term. Consider the following code:

my-element.html

<polymer-element name="my-element">
  <script type="application/dart" src="my-element.dart"></script>
  <template>
    <input type="text" value="{{ searchTerm }}">
    <ul>
      <template repeat="{{ item in items }}">
        <template if="{{ matchesSearchFilter(item) }}">
          <li>{{ item }}</li>
        </template>
      </template>
    </ul>
  </template>
</polymer-element> 

my-element.dart

@CustomTag('my-element')
class MyElement extends PolymerElement {
  @observable List<String> items = toObservable(["Monday", "Tuesday", "Wednesday"]);
  @observable String searchTerm = '';

  MyElement.created() : super.created();

  matchesSearchFilter(String item) {
    if (searchTerm.isEmpty) return true;
    return item.toLowerCase().contains(searchTerm.toLowerCase());
  }
} 

For example, when I type "Mo" in the textbox, I would expect that the list of items updates automatically, such that only "Monday" is shown. However on typing any search term, the list remains the same and the search term is ignored.

So, how to implement such a feature correctly?

解决方案

An second alternative is to add a filter :

  <template repeat="{{ item in items | filter(searchTerm)}}">
      <li>{{ item }}</li>
  </template>

and

// One line
filter(term) => (items) => term.isEmpty ? items : items.where((item) => item.toLowerCase().contains(searchTerm.toLowerCase())).toList();

Items will be filtered before being used in the repeat loop. Personally I prefer to use a filter instead of Günter's solution because :
- it's easy
- centralized
- quite understandable to add other filters with pipe operator
- your list is not changed (only filtered)

For example, imagine that you also want to sort your items. Then just add another filter :

<template repeat="{{ item in items | filter(searchTerm) | sort(sortField, sortAsc)}}">
      <li>{{ item }}</li>
</template>

Your items will be filtered and then sorted (each time searchTerm, sortField or sortAsc change). Easy ;-)

And the last tips: the previous code will filter your list at each keystroke which is not very user friendly!

Instead you can use that kind of code:

// Note that now I filter items on searchFilter and not more on searchTerm
<template repeat="{{ item in items | filter(searchFilter) | sort(sortField, sortAsc)}}">
      <li>{{ item }}</li>
</template>

And then in your class

@CustomTag('my-element')
class MyElement extends PolymerElement {

  @observable List<String> items = toObservable(["Monday", "Tuesday", "Wednesday"]);
  @observable String searchTerm = '';
  @observable String searchFilter = '';

  MyElement.created() : super.created();

  filter(term) => (items) => term.isEmpty ? items : items.where((item) => item.toLowerCase().contains(searchTerm.toLowerCase())).toList();

  // When the user keystroke, searchTerm is changed
  // Launch a Timer (if the timer was not null then stop it: it means the user has not finished
  // When the delay is elapsed then set searchFilter with searchTerm
  // As your filter use 'filter(searchFilter)' then your items will be filtered
  Timer _searchTimer;
  searchTermChanged(oldValue) {
    // If there's another keystroke during the delay then reset it
    if (_searchTimer != null) _searchTimer.cancel();
    new Timer(new Duration(milliSeconds: 300), () => searchFilter = searchTerm);
  }
} 

这篇关于Dart Polymer：如何在repeat-template中过滤元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！