javascript - 在 handlebars 模板中设置第一个单选按钮被选中

Question

我怎样才能获得一种简单明了的方式来设置第一个单选按钮在 Handlebars 模板中被选中。谢谢

模板:

<form>
    {{#each this}}
        <input value="{{value}}" />
     {{/each}}
</form>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

期望渲染:

<form>
    <input value="val 1" checked />
    <input value="val 2" />
    <input value="val 3" />
</form>

谢谢大家。

Answer 1

Handlebars 中的

{{#each}} 不会让您访问迭代次数或类似的任何东西，因此如果不稍微更改您的模板和数据，您将无法做到这一点:

<form>
    {{#each this}}
        <input type="radio" value="{{value}}" {{#if sel}}checked="checked"{{/if}} />
    {{/each}}
</form>

然后将 sel 值添加到您的数据中:

var tmpl = Handlebars.compile($('#t').html());
var html = tmpl([
    { value: 'val 1', sel: true  },
    { value: 'val 2', sel: false },
    { value: 'val 3', sel: false }
]);

演示:http://jsfiddle.net/ambiguous/27Ywu/

您当然可以在数据数组的第一个元素上设置 sel: true:

data = [ ... ];
data[0].sel = true;
var html = tmpl(data);

演示:http://jsfiddle.net/ambiguous/yA5WL/

或者，在获得 HTML 后使用 jQuery 检查第一个:

// Add the HTML to the DOM...
$('form input:first').prop('checked', true); // Or whatever selector matches your HTML

演示:http://jsfiddle.net/ambiguous/sPV9D/

---

较新版本的 Handlebars 做 give you access to the index :

When looping through items in each, you can optionally reference the current loop index via {{@index}}

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

For object iteration, use {{@key}} instead:

{{#each object}}
  {{@key}}: {{this}}
{{/each}}

因此，如果您使用的是最新的 Handlebars，您可以利用以下事实来做一些特别的事情:

1. 第一个 @index 将为零。
2. 零在 bool 上下文中是假的。

这让你可以这样做:

{{#each this}}
    <input type="radio" value="{{value}}" {{#unless @index}}checked="checked"{{/unless}} />
{{/each}}

演示:http://jsfiddle.net/ambiguous/PHKps/1/

当然，选择任何其他索引都比较困难，您要么修改输入数据(如前所述)，要么添加某种{{#if_eq}} 自定义助手。