2

我知道要将 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}

然后按钮没有被检查？

4

2 回答 2

5

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/

于 2014-01-30T03:48:38.020 回答
3

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

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>有关选择任何单选按钮的信息。

于 2014-01-29T13:58:32.943 回答