使用 Aurelia 有条件地在选择选项中添加属性答案

【问题标题】：Conditionally add attribute in select option with Aurelia使用 Aurelia 有条件地在选择选项中添加属性
【发布时间】：2016-04-07 01:43:08
【问题描述】：

我只是想创建一个 repeat.for 循环，它将在我的应用程序的表单中生成选择元素的选项。我想添加selected 归因于我的选择元素的最后一个选项，但无法弄清楚如何管理它。我的选择代码如下：

<select select class="browser-default" value.bind="maxPlayers">
  <option repeat.for="num of numPlayers" value.bind="num">${num}</option>
</select>

我的视图模型类的 numPlayers 属性只是一个简单的数组：

numPlayers = [2, 3, 4];

所以我的问题是如何将 selected 属性仅添加到我的选择元素中的最后一个选项元素？我知道有一个名为 $last 的布尔值指示我是否在最后一个元素上，但我不知道如何正确合并它。似乎我应该可以通过将selected.bind="$last" 添加到选项元素来使其工作，但这似乎没有任何效果。

【问题讨论】：

标签： javascript html aurelia

【解决方案1】：

在选项元素上使用model.bind。 HTMLOptionElement 的 value 属性将所有值强制转换为字符串。

这是一个例子：https://gist.run?id=9bdbf2518dbd1169d8607f712b09d41b

app.html

<template>
  <select select class="browser-default" value.bind="maxPlayers">
    <option repeat.for="num of numPlayers" model.bind="num">${num}</option>
  </select>
</template>

app.js

export class App {
  numPlayers = [2, 3, 4];
  maxPlayers = 4;
}

在此处绑定选择元素的更多信息：http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.4/doc/article/cheat-sheet/5

【讨论】：

非常感谢！我不知道我是如何在文档中错过的。这正是我需要的。如果您不介意，您能否解释一下我绑定到模型属性时究竟发生了什么？

【解决方案2】：

您需要将$last 变量与循环内的当前$index 进行比较，如下所示。

<select select class="browser-default" value.bind="maxPlayers">
  <option repeat.for="num of numPlayers" value.bind="num" selected.bind="$index === $last">${num}</option>
</select>

【讨论】：