Handlebars条件选中属性来自Jade模板。

Question

我希望我的把手模板在客户端呈现的样子是：

<input type='checkbox' checked={{isChecked}}>

或者

<input type='checkbox' {{#if isChecked}}checked{{/if}}>

我该如何编写一个能够被编译成这个的Jade模板？根据他们的文档，如果指定的值为真值但实际上未包含该值，则将包括checked属性：

input(type="checkbox", checked="{{isChecked}}")

编译为

<input type='checkbox' checked>

我也尝试过：

input(type="checkbox", checked={{isChecked}})

和

input(type="checkbox", {{#if isChecked}}checked{{/if}})

只是无法编译，这一点我理解

- md-ben

Answer 1

直接在你的 Jade 模板中尝试它。

<input type='checkbox' {{#if isChecked}}checked{{/if}}>

应该保持相同的格式。

- jmingov

Answer 2

我建议创建一个更通用的助手程序，以便以后可以轻松重复使用。

Handlebars.registerHelper("checkedIf", function (condition) {
    return (condition) ? "checked" : "";
});

然后，你可以在任何模板中使用它：

<script id="some-template" type="text/x-handlebars-template">
   ...
   <input type="checkbox" {{checkedIf this.someField}} />
   ...
</script>

这将被渲染为

<input type="checkbox" checked />

 or...

<input type="checkbox" />

根据正在映射到模板的对象的字段someField的值进行操作。

- sports

---

你如何检查负一，就像检查 false 一样？ - Dvid Silva

@dvidsilva 我已经很久没有使用Handlebars了...这个代码可以吗？{{checkedIf !this.someField}}? - sports

其实不是，最后我不得不写checkedIf和checkedIfNot :O - Dvid Silva