在 aurelia 视图中搜索数组中的元素

Question

我正在使用 if.bind 有条件地显示视图中的元素。在我目前的情况下，我有类似于

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

我希望将 if.bind 缩短为 if.bind="car.model in allModels 之类的内容，以避免出现许多 ||

（在 PHP 中有类似 in_array 的内容）

我有什么解决方案？

Answer 1

您可以在 Aurelia 中的 if 和 show 绑定中使用 javascript 表达式。因此，如果您的 class 中有一个名为 allModels: string[] 的属性，您只需使用 indexOf:

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

如果你没有 allModels 属性，你也可以硬编码：

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

Answer 2

如果您不想对视图模型进行任何更改，Adiga 的回复显示了一种执行此操作的便捷方法。您可以考虑的一种替代方法是使用计算属性并将此逻辑移至视图模型中。您可以利用 computedFrom 装饰器来做到这一点：

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

那么在你看来你可以这样做：

app.html

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

这样您可以清理视图逻辑，但也可以避免由于需要观察和重新计算 showCar 属性而导致的脏检查。从功能上讲，这些方法是相同的，但如果您计划对视图模型进行单元测试，这种方法可能会让生活更轻松。

在 aurelia 视图中搜索数组中的元素

Searching for element in array in aurelia view

binding

aurelia