7

如何在 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>

谢谢大家。

4

2 回答 2

10

{{#each}}在 Handlebars 中不会让您访问迭代编号或类似的东西，因此如果不稍微更改模板和数据就无法做到这一点：

<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 确实让您可以访问索引：

循环访问 中的项目时each，您可以选择通过以下方式引用当前循环索引{{@index}}

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

对于对象迭代，请{{@key}}改用：

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

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

  1. 第一个@index将为零。
  2. 零在布尔上下文中是错误的。

这让你可以这样做：

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

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

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

于 2012-07-16T04:02:24.017 回答
0

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

<form>
    {{#each people as |value index|}}
        <input value="{{value}}" type="radio" {{#unless index}}checked="checked"{{/unless}}/>
     {{/each}}
</form>
于 2017-01-26T01:59:24.450 回答