Question

假设你有一个像这样的选择下拉列表：

<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>

你可以忽略/抽象远离i18n翻译过滤器和自定义语言更改通知程序，但我确实留下来说明我不能只是从.js文件中添加这些选项。

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

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

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

但是，只有当我手动更改所选值，单击选择下拉列表并选择一个选项时，才会发生这种情况。

如何从标记中插入的选项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>

当我控制台登出时，它仍然只是说空。

EDIT2

感谢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）在viewmodel中设置初始可绑定属性值，并在构造函数内部使用i18n在viewmodel内部以编程方式进行转换。像是这样的东西：

从aurelia-framework＆＃39;导入{inject，bindable}; 从＆＃39; aurelia-i18n＆＃39;;

导入{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的value属性绑定到viewmodel上的属性时，select元素的值始终使用viewmodel属性值进行初始化。

换句话说，在select数据绑定之前，必须将所需的初始值分配给viewmodel的status属性。

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

1 个答案: