Question

我正在Aurelia创建一组单选按钮，代码如下：

   <div repeat.for="option of options">
       <input type="radio" id="${option}_id" name="radio_options" model.bind="option" checked.bind="optionValue"/>
       <label for="${option}_id" id="${option}_label">${option}</label>
   </div>

然而，这样做我发现model.bind不起作用 - 当选中单选按钮时，不会填充相应类中的optionValue。类似地，当在类中为optionValue分配一些值时，不会检查相应的单选按钮。我发现这只发生在转发器上。在我的情况下，选项是数字。你能帮我找一下这里可能有什么问题吗？

Answer 1

第一个问题是在处理对象时应该使用model.bind。由于您使用的是原始类型，因此应使用value.bind代替。

第二个问题是输入值总是字符串，因此在设置初始值时，它必须是字符串。例如：

HTML：

<template>
  <div repeat.for="option of options">
     <input type="radio" id="${option}_id" name="radio_options" value.bind="option" checked.bind="optionValue"/>
     <label for="${option}_id" id="${option}_label">${option}</label>
   </div>
  <p>Selected Option: ${optionValue} </p>
</template>

JS：

export class App {
  options = [ 1, 2, 3, 4 ]
  optionValue = '3';
}

如果您确实希望在视图模型中使用int，则可以创建ValueConverter，以便在将值传递给视图或从视图传递时将值转换为int。例如：

export class AsIntValueConverter {
  fromView(value) {
    return Number.parseInt(value);
  }

  toView(value) {
    return value.toString();
  }
}

用法：

 <input type="radio" id="${option}_id" name="radio_options" value.bind="option" checked.bind="optionValue | asInt"/>

运行示例https://gist.run/?id=1465151dd5d1afdb7fc7556e17baec35

Aurelia repeater：model.bind不适用于单选按钮

1 个答案: