ractivejs - 将 bool 值绑定(bind)到单选按钮

Question

当我将一个 bool 变量绑定(bind)到具有 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>

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

我怎样才能让这个绑定(bind)起作用？是 Ractive 的错误还是我做错了什么？

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

Answer 1

对于这种情况，计算属性将是一种矫枉过正。实际上，你已经足够接近你原来的例子了。只需尝试以下操作(唯一的变化是 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>