Ember技术问题：如何在路由、控制器或视图中过滤模型数据

我来帮你梳理下在Ember里实现测试结果过滤的几种常用方案，刚好你提到的几个场景都有对应的最佳实践，咱们一步步来：

一、模板层面直接过滤（快速实现静态筛选） #

如果只是简单筛选已通过的测试，直接在模板里用{{#if}}判断是最直接的方式，就像你写的那样：

{{#each tests as |test|}}
  {{#if test.passed}}
    {{test.name}}
  {{/if}}
{{/each}}

这种方式优点是快速上手、无需额外逻辑，适合固定条件的静态过滤，但缺点是没法处理动态变化的过滤条件（比如用户输入搜索），也不利于代码复用。

二、控制器层面实现初始过滤（更可控的逻辑） #

如果想把过滤逻辑集中在控制器里（Ember中控制器负责视图层的数据展示逻辑），推荐用计算属性来处理，这样过滤逻辑更清晰，也方便后续扩展：

import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default Controller.extend({
  // 计算属性：自动过滤已通过的测试
  filteredTests: computed('model.tests.@each.passed', function() {
    return this.get('model.tests').filter(test => test.passed);
  })
});

然后在模板里直接遍历这个计算属性：

{{#each filteredTests as |test|}}
  {{test.name}}
{{/each}}

这种方式的好处是把过滤逻辑和模板分离，后续修改过滤规则只需要改计算属性即可，还能复用这个过滤后的数据集。

三、输入框实时动态过滤（响应用户交互） #

如果需要支持用户通过输入框实时过滤测试名称，咱们可以扩展上面的计算属性，结合一个绑定的输入框值来实现：

控制器代码： #

import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default Controller.extend({
  // 绑定输入框的过滤关键词
  filterKeyword: '',

  // 计算属性：同时依赖测试列表和过滤关键词
  filteredTests: computed('model.tests.@each.{name,passed}', 'filterKeyword', function() {
    const keyword = this.get('filterKeyword').toLowerCase().trim();
    const tests = this.get('model.tests');

    // 先过滤已通过的测试，再根据关键词匹配名称
    return tests.filter(test => {
      const matchesKeyword = test.name.toLowerCase().includes(keyword);
      return test.passed && matchesKeyword;
    });
  })
});

模板代码： #

<!-- 输入框绑定到filterKeyword -->
{{input value=filterKeyword placeholder="搜索已通过的测试..."}}

<!-- 遍历过滤后的结果 -->
{{#each filteredTests as |test|}}
  {{test.name}}
{{/each}}

这样用户输入关键词时，filteredTests会自动重新计算，实时更新展示的测试列表，完全实现动态过滤的需求。

另外，如果你想用action来触发过滤（比如点击按钮过滤），也可以在控制器里写对应的action方法，更新过滤后的列表，但计算属性的方式更符合Ember的响应式设计，推荐优先使用。

内容的提问来源于stack exchange，提问作者AmazingDayToday