Ember-cliフィルタリングモデル（名前はhtml選択オプションあり）

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

BMWのみ？この方法の場合：

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

ありがとうございます。

Answer 1

主なアプローチは2つあります。サーバーにフィルタリングを依頼したり、フィルタリングを依頼することができます。後では明らかに大量のレコードではうまくスケールされません。

あなた自身をフィルタリングするには、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

はヘルパー/ IS-equal.js

ため

ember generate helper is-equal 

コンテンツである-同じヘルパーを書くことができます

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

何百もの車のレコードがある場合は、このアプローチを実際に使用するべきではありません。バックエンドに仕事をさせてください。