将布尔值绑定到单选按钮

Question

当我将一个布尔变量绑定到具有 true/false 值的单选按钮时，单选按钮的选中状态在模板首次加载时没有设置——两者都保持未选中状态。

new Ractive({
    template: "#template",
    el: "#output",
    data: {
        accept: true
    }
});

<script src="//cdn.ractivejs.org/latest/ractive.js"></script>
<div id="output"></div>
<script id="template" type="text/html">
    <input type="radio" name="{{ accept }}" value="true" /> Yes
    <input type="radio" name="{{ accept }}" value="false" /> No
    <br/>
    accept = {{ accept }}
</script>

但是一旦我点击单选按钮，它们的选中状态就会与布尔变量同步。

我怎样才能让这个绑定生效？是 Ractive 的错误还是我做错了什么？

我可以通过将我的布尔变量更改为字符串 (accept: "true") 来解决这个问题，但这确实不太理想。

Answer 1

据我所知，ractive 键入了所有硬编码在字符串输入的模板值属性中的内容。图文并茂here.

但是，您的数据对象中的属性显然保留了它们的类型。无论如何，通常多个不同的值是您使用单选按钮的目的。一个简单的“true/false”布尔值只需要一个复选框。将单选按钮绑定到 bool 对象的丑陋示例 here.（PS：显然不推荐）。

Answer 2

Computed 属性对于这种情况来说有点矫枉过正。实际上，你已经足够接近你原来的例子了。只需尝试以下操作（唯一的变化是 value="{{true}}" 而不是 value="true"）：

new Ractive({
    template: "#template",
    el: "#output",
    data: {
        accept: false
    },
});

<script src="//cdn.ractivejs.org/latest/ractive.js"></script>
<div id="output"></div>
<script id="template" type="text/html">
    <input type="radio" name="{{ accept }}" value="{{true}}"/> Yes
    <input type="radio" name="{{ accept }}" value="{{false}}"/> No
    <br/>
    accept = {{ accept }}
    <button on-click="toggle('accept')">toggle</button>
</script>

将布尔值绑定到单选按钮

Binding boolean values to radio buttons

ractivejs