Searching for element in array in aurelia view

Question

I am using if.bind to conditionally display elements in a view. In my current case, I have something similar to

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

I am looking to shorten the if.bind to something like if.bind="car.model in allModels in order to avoid having many ||

(In PHP there's something like in_array)

What solutions do I have?

Answer 1

Adiga's response shows a convenient way to do this if you prefer not to make any changes to your view-model. One alternative you could consider is using a computed property and moving this logic into the view-model instead. You could do this leveraging using the computedFrom decorator:

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

Then in your view you could do something like this:

app.html

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

That way you can clean up the view logic but also avoid dirty checking that would result from needing to watch and re-calculate the showCar property. Functionally the approaches are the same, though this approach may make life easier if you plan to unit test the view-model.