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

Posted 2023-02-22

【中文标题】Ember-cli 按名称过滤模型，带有 html 选择选项

【英文标题】：Ember-cli filtering model by name, with html select options

【发布时间】：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>

感谢您的进一步回复。

【参考方案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

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