Question

我正在编写一个有趣的小项目来增强我的HTML / JS技能。我正在使用Handlebars渲染某些表单，但遇到了我似乎无法解决的问题。

我已将其注册为名为“复选框”的部分模板：

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

当我制作表单以添加数据时，这做得很好，但是现在我正在制作 edit 数据的表单，因此我想选中是否已选中当前项的复选框。我不知道该怎么做。

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

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

但是，如果我传递诸如isChecked=true之类的值，则每次都会得到一个复选框，因为我认为HTML中存在的那种属性的意思是“真”。好吧。

所以我尝试使用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属性？

1 个答案: