Question

我知道要将ractive变量绑定到单选按钮，最简单的方法是

<input type="radio" name="{{myVar}}" value="1" checked>

模板中的

，但名称上的花括号仍保留在html中。是否有一种聪明的方式来输出

<input type="radio" name="myVar" value="1" checked>

在html中，所以我不必改变表单处理？我已经尝试了一些

的逻辑

<input type="radio" name="myVar" value="1" {{#myVar==1}}checked{{/myVar==1}}

但是没有约束力。

另外，不太重要的是，有没有办法将它绑定为数值，就好像我有

data:{myVar:1}

然后按钮没有被检查？

Answer 1

Ractive将大括号添加到输入名称以防止name='{{myVar}}'和name='myVar'之间发生冲突的可能性（极不可能） - 没有其他原因。在呈现元素时创建绑定;之后这个名字变得无关紧要。

所以虽然没有办法阻止首先添加花括号，但你可以在之后更改它们：

ractive.findAll('input[type="radio"]').forEach( function(input) {
  input.name = input.name.replace('{{','').replace('}}','');
});

如果您使用Ractive.extend()创建组件，则可能是init()方法的一部分。

数字值应该没有问题，至少从上次发布的版本（0.3.9）和当前开发版本（0.4.0）开始。请看这个小提琴，例如：http://jsfiddle.net/rich_harris/7qQZ8/

Answer 2

简短回答：我认为不可能做你想做的事。

Ractive处理单选按钮的方式与简单的HTML标记不同。它假设您要使用简单变量检索哪个单选按钮，并依赖name属性来执行此操作。具体来说，它希望您将name属性设置为组中所有单选按钮中的相同特定变量（例如"{{myVar}}"）。然后，它会自动将该变量设置为选择单个单选按钮的value属性。

例如，如果您有以下代码：

    <label><input type='radio' name='{{myVar}}' value='1' checked> 1</label>
    <label><input type='radio' name='{{myVar}}' value='2'        > 2</label>
    <label><input type='radio' name='{{myVar}}' value='3'        > 3</label>
    <p>The selected value is {{myVar}}.</p>

然后Ractive将自动更新<p>，其中包含有关所选单选按钮的信息。

Ractive单选按钮绑定 - 保留名称

2 个答案: