Aurelia - 绑定 <select> 不设置视图模型属性答案

【问题标题】：Aurelia - Binding <select> doesn't set view model propertyAurelia - 绑定 <select> 不设置视图模型属性
【发布时间】：2018-06-06 08:52:10
【问题描述】：

创建选择下拉菜单时，视图模型上的绑定属性不会更新为默认选项。

例如鉴于此视图模型：

export class App {

  @observable
  selected = 0;

}

还有这个观点

<select value.two-way="selected">
  <option model.bind="1">1</option>
  <option model.bind="2">2</option>
  <option model.bind="3">3</option>
</select>

<span>
    The selected value is: ${selected}
</span>

最初呈现页面时，您将看到“选定的值是：0” - 即使下拉菜单显示 1。将下拉菜单更改为 2 并返回 1，您将看到“选定的值是：1” .

我知道为什么您可能会出现这种行为，但它与 Knockout 不同（我正在转换旧的 Durandal 应用程序）...有没有办法强制 viewmodel 属性成为有效的选择选项之一？

在这里直播：http://plnkr.co/edit/v4y3k3TcEzOrm4P2ulNy?p=preview

注意：真正的世界代码并没有打算将 'selected' 属性设置为不存在的值，下拉列表有一个值转换器，可以过滤掉选项但不强制viewmodel 属性更新为默认选项。

谢谢。

【问题讨论】：

重点是即使select元素没有显示selected-value（它无法显示其选项中不存在的内容），它还没有选择selected-value（它不能，因为它只能选择其选项中的内容）。我建议构建一个自定义元素或自定义属性，您可以在其中验证所选值是否存在于选项中，如果不存在，请将所选值更改为选项数组的第一项，或者将一个项目插入代表您选择的选项 -价值
@Schadensbegrenzer 可能会误解你在说什么，但“它不能，因为它只能选择选项中的内容” - 我明白了，我不希望选择改变到不存在的值，我希望 viewmodel 属性更改为 select 的实际值。
我明白了。但是要自动发生这种情况，必须触发更改事件，如果值不在选项列表中，则不会触发。 document.getElementById("myselect").value = "-1" 不会触发更改事件。所以我建议你将你的选择包装在一个自定义元素中（或创建一个自定义属性），如果 selectedValue 在选项数组中不存在，它会添加选项项。
另一个选项，如果您的默认值为零，则将一个空选项项添加到值为 0 的选择列表中，然后使用验证来禁止它的选择

标签： javascript aurelia

【解决方案1】：

在这里阅读 Fred 的解释：https://github.com/aurelia/binding/issues/686

如果您使用 repeat.for 来构建选项。由于触发更改事件的选项延迟填充，它将正确设置初始值。

<select value.bind="selected">
  <option repeat.for="v of [1,2,3]" model.bind="v">${v}</option>
</select>

仅供参考，没有必要使用value.two-way，因为默认情况下，值绑定是选择/输入标签上的两种方式。

【讨论】：

谢谢 - 我实际上在真实代码中使用了 repeat.for。不幸的是，它没有在那里修复它（尽管它在我的简单 plunkr 中确实有效）。看不到问题！不过谢谢你的回答