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表达式。因此，如果您的班级中有一个名为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视图中搜索数组中的元素

2 个答案: