Question

我开始使用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>

感谢您的进一步回复。

Answer 1

主要有两种方法。您可以要求服务器为您过滤它们或自行过滤它们。对于大量的记录，后者显然不会很好地扩展。

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

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

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

Answer 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');
})

Answer 3

可以通过

写一个等于对手的帮手

import Ember from "ember";

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

export default Ember.Helper.helper(checkEquality);

帮助者的内容/ is-equal.js

{{#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}}

在模板中

<location />

当你拥有数百张汽车记录时，真的不能使用这种方法。让后端完成这项工作。

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

3 个答案: