Question

如何在Handlebars模板中选中设置第一个单选按钮的简单明了方式。 TKS

模板：

<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/

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

// 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：

循环浏览each中的项目时，您可以选择通过{{@index}}
引用当前循环索引
{{#each array}}
  {{@index}}: {{this}}
{{/each}}
对于对象迭代，请改为使用{{@key}}：
{{#each object}}
  {{@key}}: {{this}}
{{/each}}

所以，如果您使用最新的Handlebars，您可以通过以下事实做一些特别的事情：

第一个@index将为零。
零在布尔上下文中是假的。

这可以让你这样做：

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

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

当然，挑选任何其他索引更难，并且要么修改输入数据（如前所述），要么添加某种{{#if_eq}}自定义帮助程序。

Answer 2

index将作为第二个参数传递，

<form>
    {{#each people as |value index|}}
        <input value="{{value}}" type="radio" {{#unless index}}checked="checked"{{/unless}}/>
     {{/each}}
</form>

在把手模板中设置第一个单选按钮

2 个答案: