当我将一个 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"
) 来解决这个问题,但这并不理想。
最佳答案
对于这种情况,计算属性将是一种矫枉过正。实际上,你已经足够接近你原来的例子了。只需尝试以下操作(唯一的变化是 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>
关于ractivejs - 将 bool 值绑定(bind)到单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30309306/