Ember-cli 按名称过滤模型，带有 html 选择选项答案

【问题标题】：Ember-cli filtering model by name, with html select optionsEmber-cli 按名称过滤模型，带有 html 选择选项
【发布时间】：2017-03-12 22:35:03
【问题描述】：

我开始使用 emberjs，我已将我的 ember 应用程序连接到 API，并且我的模型工作正常。我可以在模板中显示模型，但如何过滤它们？例如，这是我的模型：

import DS from 'ember-data';

export default DS.Model.extend({
  placeofdamage: DS.attr('string'),
  ees: DS.attr(),
  type: DS.belongsTo('type'),
  brand: DS.belongsTo('brand')
});

如何显示 ex.只有宝马？用这个方法：

<select class="form-control" id="selectBrand">
  {{#each model.brands as |brand|}}
    <option>{{brand.name}}</option>
   {{/each}}
 </select>

感谢您的进一步回复。

【问题讨论】：

标签： ember.js

【解决方案1】：

主要有两种方法。您可以要求服务器为您过滤或自己过滤。后者显然不能很好地适应大量记录。

要自己过滤它，你可以使用像ember-composable-helpers 这样的插件，它会让你的生活更轻松，或者你可以自己为它创建计算属性。

要让它过滤您的 api，您必须在商店中使用 query。

如果您希望允许用户切换此过滤器，您可以自行连接或使用query-params。我建议你阅读这篇文章。

【讨论】：

谢谢，我使用了可组合的助手，带有 ember 电源选择和查询参数。

【解决方案2】：

我的答案是针对您的示例的。你可以安装ember-truth-helpers插件，你可以把eq检查。

{{#each model.brands as |brand|}}
  {{#if (eq brand.name "BMW") }}
    <option>{{brand.name}}</option> 
  {{/if}}
{{/each}}

或者创建计算属性并使用filterBy过滤品牌，

onlyBMWBrand: Ember.computed('model.brands', function(){
 return this.get('model.brands').filterBy('name','BMW');
})

【讨论】：

【解决方案3】：

可以写一个 is-equal 助手

ember generate helper is-equal

helpers/is-equal.js 的内容

import Ember from "ember";

export function checkEquality([leftSide, rightSide]) {
    return leftSide === rightSide;
}

export default Ember.Helper.helper(checkEquality);

在模板中

{{#each cars as |car|}}
   {{#if (is-equal car.brand "BMW")}}
       <img src={{bmwLogo}} />
   {{else if (is-equal car.brand "Volvo")}}
       <img src={{volvoLogo}} />
   {{else}}
        No match.
   {{/if}}
{{/each}}

当您拥有数百条汽车记录时，不应该真正使用这种方法。让后端完成这项工作。

【讨论】：