Aurelia：从直接插入 html 的选项中绑定最初选择的值

Question

假设您有一个这样的 select 下拉菜单：

<select class="form-control" value.two-way="status">
    <option value="${'status_deceased' | t:notifier.signal}">${'status_deceased' | t:notifier.signal}</option>
    <option value="${'status_duplicate' | t:notifier.signal}">${'status_duplicate' | t:notifier.signal}</option>
</select>

您可以 ignore/abstract 远离 i18n 翻译过滤器和自定义语言更改通知程序，但是我确实将其留在那里以说明我不能只从 .js 文件添加这些选项。

但我的问题是，如果你这样做的话。直接在标记中输入选项，如何在 .js 文件中设置初始 selected 值？

当我这样做并在我的 .js 文件中添加 @bindable status 时，为什么它说它未定义？

我现在希望标记中 select 字段中的 selected（从初始加载）选项现在可以在 .js 文件中使用，从而绑定。

然而，只有当我手动更改 selected 值时才会发生这种情况，单击 select 下拉菜单并选择一个选项。

我最初如何设置 selected 选项，从标记中插入的选项 html 标签？

编辑：

我也试过这样，使用 value.bind 而不是 bind.two-way:

<select class="form-control" value.bind="status">
    <option value.bind="'status_deceased' | t:notifier.signal">${'status_deceased' | t:notifier.signal}</option>
    <option value.bind="'status_duplicate' | t:notifier.signal">${'status_duplicate' | t:notifier.signal}</option>
</select>

当我控制台注销时它仍然只是说 null。

编辑2

感谢 Jeremy 的评论，结果解决方案是：

1) 选项值

的值而不是 value.bind

<select class="form-control" value.bind="status">
    <option value="${'status_deceased' | t:notifier.signal}">${'status_deceased' | t:notifier.signal}</option>
</select>

2) 在视图模型中设置初始可绑定属性值，并在构造函数中使用 i18n 以编程方式在视图模型中进行转换。比如：

从'aurelia-framework'导入{注入，可绑定}；从 'aurelia-i18n';

导入 {I18N}

@inject(I18N)
export class App {
  @bindable lolcat;

  constructor(i18n){
    this.i18n = i18n;
    this.lolcat = i18n.tr('test');
  }

  lolcatChanged(value){
    this.lolcat = value;
  }
}

Answer 1

当您将 select 的值属性绑定到视图模型上的属性时，select 元素的值始终使用任何视图模型属性值进行初始化是。

换句话说，您必须在 select 数据绑定之前将所需的初始值分配给视图模型的状态属性。

export class App {
  status = 'status_deceased';
}

<select class="form-control" value.bind="status">
  <option value="status_deceased">${'status_deceased' | t:notifier.signal}</option>
  <option value="status_duplicate">${'status_duplicate' | t:notifier.signal}</option>
</select>

虽然不确定这是否回答了您的问题 - 如果我错过了请告诉我。

Aurelia：从直接插入 html 的选项中绑定最初选择的值

Aurelia: Bind initially selected value from options inserted directly in html

javascript

aurelia