将车把 bindAttr 用于复选框答案

【问题标题】：using handlebars bindAttr for checkbox将车把 bindAttr 用于复选框
【发布时间】：2012-02-22 06:48:06
【问题描述】：

我在backbone.js rails 应用程序中使用把手，并且我有一个布尔字段，我用一个复选框填充。

当我加载编辑页面时，表单会填充来自服务器 JSON 的内容，例如

{id:3,user:'test',checkbox:1}

现在在我的车把表单中，我想显示复选框为 1。

但这并没有返回选中的复选框。我真的很想只能说if checkbox==1，但我不知道如何使用车把来做到这一点。

有什么建议吗？？

【问题讨论】：

【解决方案1】：

我还写了一个助手来做到这一点。它不使用backbone.js，因此可能是某些人的替代方案：

Handlebars.registerHelper('checked', function(currentValue) {
    return currentValue == '1' ? ' checked="checked"' : '';
});

使用示例：

<input type="checkbox" name="cbxExample" id="cbxExample" {{checked cbxExample}}/>

如果提供的 JSON 是：

{"cbxExample" : "1"}

导致：

<input type="checkbox" name="cbxExample" id="cbxExample" checked="checked" />

[我的第一篇文章-希望对您有所帮助！]

【讨论】：

您可能想使用三元组{，这样" 就不会被转义。使用{{checked cbxExample}}，您的代码中的输出实际上是checked=&quot;checked&quot;。使用{{{checked cbxExample}}}，我们得到正确的输出（checked="checked"）。
这有助于我处理 JSON... 检查：“true”或“false”——作为字符串 return currentValue == 'true' ? 'checked' : '';

【解决方案2】：

您通常会在“模型”中使用布尔值。

{
    isChecked: true
}

然后

<input type="checkbox" {{bindAttr checked="isChecked"}}>

如果布尔值为真，它将呈现checked 属性，如果布尔值为假，它将忽略该属性。所以如果isChecked 为真，那么Handlebars 会输出

<input type="checkbox" checked>

如果isChecked 为假，我们会得到

<input type="checkbox">

这就是我们想要的！

【讨论】：

对于元素的“checked”属性到控制器/上下文的双向绑定（以便在选中复选框时更新控制器/上下文），您可以使用输入助手：@987654329 @（但由于 ember 输入助手不支持“数据未检查值”，请参阅：stackoverflow.com/questions/9894335）