如何处理 Handlebars 部分中的布尔值 HTML 属性？

Question

我正在编写一个有趣的小项目来培养我的 HTML/JS 技能。我正在使用 Handlebars 渲染一些表单，但我碰到了一些我似乎无法绕过的东西。

我已将其注册为名为 'checkbox':

的部分模板

<label>
<input 
   type="checkbox" 
   id="{{id}}" 
   name="{{id}}" 
   value="true">
{{labelText}}
</label>

当我制作表格以添加数据时，这对我来说很好，但现在我正在制作表格以编辑数据，所以如果当前项目已经被选中。我不知道该怎么做。

我尝试的第一件事是这样的：

<label>
<input 
   type="checkbox" 
   id="{{id}}" 
   name="{{id}}" 
   value="true"
   checked="{{isChecked}}">
{{labelText}}
</label>

但是如果我传递像 isChecked=true 这样的值，我每次都会得到一个复选框，因为我猜 HTML 中的那种属性存在意味着 'true'。好的。

所以我尝试使用 if 助手：

<input 
   type="checkbox" 
   id="{{id}}" 
   name="{{id}}" 
   value="true"
   {{#if isChecked}}checked{{/if}}>
{{labelText}}

这种有效。如果我完全省略 isChecked 属性，则该框未选中。如果我像这样硬编码 true 或 false 值，它会起作用：

{{> checkbox id="test" labelText="test" isChecked=true }}

但我似乎无法获得我想要的价值。例如，如果我尝试：

{{> checkbox id="test" labelText="test" isChecked="{{someCondition}}" }}

似乎条件没有得到正确解决，因为在那种情况下我总是得到属性。

我错过了什么？我觉得应该有办法做到这一点，但我运行没有技巧。

Answer 1

不能将一个表达式放在另一个表达式中：

{{> checkbox id="test" labelText="test" isChecked="{{someCondition}}" }}

根据您编写的示例，我假设您遇到的问题与您传递上下文的方式有关 - id 和 labelText 是硬编码的，而 isChecked 应该是一个变量某种。实际上，所有这些都应该是变量。考虑以下示例 - HTML:

<div id="content"></div>

<script id="parent-template" type="text/x-handlebars-template">
  {{#each checkboxes}}
    {{> checkbox this }}<br>
  {{/each}}
</script>

<script id="partial-template" type="text/x-handlebars-template">
  <input 
    type="checkbox" 
    id="{{id}}" 
    name="{{id}}" 
    value="true"
    {{#if isChecked}}checked{{/if}}>
  {{labelText}}
</script>

JS:

var parentTemplate = Handlebars.compile($("#parent-template").html());

Handlebars.registerPartial({
  checkbox: Handlebars.compile($("#partial-template").html())
});

$('#content').html(parentTemplate(
  {checkboxes: [
    {id: 1, labelText: "test 1", isChecked: true},
    {id: 2, labelText: "test 2", isChecked: false},
  ]}
));

如何处理 Handlebars 部分中的布尔值 HTML 属性？

How do I handle a boolean HTML attribute in a Handlebars partial?

handlebars.js