アウレリアビューで配列内の要素を検索する

Question

私はif.bindを使用して、要素をビューに条件付きで表示しています。私の現在のケースでは、私は

<template> 
    <h2 if.bind="car.model === 'Ferrari' || car.model === 'Ford` || car.model === 'Renault'"> 
    ${ car.price} 
    </h2> 
</template> 

を避けるために、私はif.bind="car.model in allModelsのようなものにif.bindを短縮するために探していますのようなものを持っている多くの||

（PHPでありますin_arrayのようなもの）

どのような解決策がありますか？

Answer 1

Adigaさんレスポンスは、ビューモデルを変更したくない場合に便利な方法です。考えられる1つの選択肢は、計算されたプロパティを使用し、代わりにこのロジックをビューモデルに移動することです。あなたはcomputedFromデコレータを使用して、この活用を行うことができます：

app.html

<template> 
    <h2 if.bind="showCar"> 
     ${car.price} 
    </h2> 
</template> 

：

app.js

import {computedFrom} from 'aurelia-framework'; 

export class App{ 
    car = { model : ''}; 

    constructor(){ 
    this.allModels = ['Ferrari','Ford','Renault']; 
    } 

    @computedFrom('car.model') 
    get showCar() { 
    return this.allModels.indexOf(this.car.model) > -1; 
    } 
} 

を次に、あなたのビューであなたはこのような何かを行うことができます

このようにしてビューロジックをクリーンアップできますが、di showCarプロパティを監視して再計算する必要があるために発生するrtyチェック。機能的にはアプローチは同じですが、このアプローチでは、ビュー・モデルの単体テストを計画している方が楽になるかもしれません。

Answer 2

アウレリアのifとshowバインディング内でjavascript式を使用できます。あなたのクラスでallModels: string[]と呼ばれる性質を持っているのであれば、あなたは、単にindexOfを使用することができます。

<h2 if.bind="allModels.indexOf(car.model) > -1"> 
    ${car.price} 
</h2> 

あなたがallModels性質を持っていない場合は、ハードコーディングすることができます：

if.bind="['Ferrari','Ford','Renault'].indexOf(car.model) > -1"