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

Question

我在 Aurelia 有一个 select 看起来像

                        <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

您可以向您的视图模型添加一个 get 方法，该方法 returns 显示名称，如下所示：

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

${我的条件？ car.name: car.name + ' - ' + getCarSeries.get(car.id)}

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

Using templates as select option name in Aurelia

html

select

aurelia