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

【问题标题】：Searching for element in array in aurelia view在 aurelia 视图中搜索数组中的元素
【发布时间】：2018-02-10 08:07:01
【问题描述】：

我正在使用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 的东西）

我有什么解决方案？

【问题讨论】：

标签： binding aurelia

【解决方案1】：

如果您不想对视图模型进行任何更改，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 属性而导致的脏检查。从功能上讲，这些方法是相同的，但如果您计划对视图模型进行单元测试，这种方法可能会让生活变得更轻松。

【讨论】：

【解决方案2】：

您可以在 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"

【讨论】：