Dart 聚合物 : How to filter elements in repeat-template?

Question

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

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());
  }
} 

例如，当我在文本框中键入“Mo”时，我希望项目列表会自动更新，以便只显示“星期一”。但是，在键入任何搜索词时，列表保持不变，并且会忽略搜索词。

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

Answer 1

第二种选择是添加过滤器:

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

和

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

项目在用于重复循环之前将被过滤。
我个人更喜欢使用过滤器而不是 Günter 的解决方案，因为:
- 这很简单
- 集中式
- 使用管道操作符添加其他过滤器是可以理解的
- 您的列表未更改(仅过滤)

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

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

您的项目将被过滤然后排序(每次 searchTerm、sortField 或 sortAsc 更改时)。简单 ;-)

最后提示:前面的代码将在每次击键时过滤您的列表，这对用户来说不是很友好!

相反，您可以使用这种代码:

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

然后在你的类(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);
  }
}