Question

我在Aurelia中有一个看起来像

的选择

                        <select
                            name="car"
                            value.bind="car">
                            <option repeat.for="car of cars" model.bind="car.id">
                                ${car.name}
                            </option>
                        </select>

现在，我想根据条件显示汽车的名称，例如

                            <template if.bind="mYcondition">
                                ${car.name}
                            </template>
                            <template if.bind="!mYcondition">
                                ${car.name} - ${getCarSeries.get(car.id)}
                            </template>

如果我把它放在一起，看起来像

                        <select
                            name="car"
                            value.bind="car">
                            <option repeat.for="car of cars" model.bind="car.id">
                                <template if.bind="mYcondition">
                                     ${car.name}
                                </template>
                                <template if.bind="!mYcondition">
                                    ${car.name} - ${getCarSeries.get(car.id)}
                                 </template>
                            </option>
                        </select>

在这种情况下，我的IDE因Element template is not allowed here而抱怨。

周围有什么办法吗？

Answer 1

您可以向viewmodel添加get方法，该方法返回显示名称，如下所示：

public get getDisplayName(car) {
  if (mYcondition) {
    return car.name;
  } else {
    return car.name + " - " this.getCarSeries.get(car.id);
  }
}

然后在你的视图中调用它：

<select name="car" value.bind="selectedCar">
  <option repeat.for="car of cars" model.bind="car.id">
     ${getDisplayName(car)}
   </option>
</select>

Answer 2

$ {mYcondition？ car.name:car.name +& 39; - ＆＃39; + getCarSeries.get（car.id）}

在Aurelia中使用模板作为选择选项名称

2 个答案: