Question

当我将布尔变量绑定到具有true / false值的单选按钮时，单选按钮＆＃39;模板首次加载时，检查状态不会设置 - 两者都保持未选中状态。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何让这种绑定工作？这是Ractive的错误还是我做错了什么？

我可以通过将我的布尔变量更改为字符串（accept: "true"）来解决此问题，但这实际上并不理想。

Answer 1

对于这种情况，计算属性将是一种过度杀伤力。实际上，你在原始例子上已经足够接近了。只需尝试以下操作（仅更改为value="{{true}}"而不是value="true"）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

据我所知，ractive类型的所有内容都硬编码在模板值输入到字符串的道具中。插图here。

但是，数据对象中的属性显然会保留其类型。通常，您使用单选按钮可以使用多个不同的值。一个简单的＆＃34; true/false＆＃34; bool不需要复选框。将单选按钮绑定到bool对象here.的丑陋示例（PS：显然不推荐）。

将布尔值绑定到单选按钮

2 个答案: