设置第一个单选按钮在句柄模板中被选中 [英] set the first radio button is checked in handlebars template

问题描述

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

模板：

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

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

预期呈现：

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

谢谢大家。

解决方案

{{＃each}} 在Handlebars中不允许您访问迭代号码或任何类似的内容，所以你不能没有改变你的模板和数据：

 < form> 
 {{#each this}} 
< input type =radiovalue ={{value}}{{#if sel}} checked =checked{{/ if}} /> 
 {{/每个}} 
< / 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：

  data = [...]; true 在您的数据数组的第一个元素上。 
 data [0] .sel = true; 
 var html = tmpl（data）; 
  

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

另外，使用jQuery检查HTML之后的第一个：

  //将HTML添加到DOM ... 
 $（'form input：first'）。 prop（'checked'，true）; //或者任何与您的HTML匹配的选择符
  

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

---

更新版本的把手可以为您提供对索引的访问权：

在循环中的每个中的项目时，可以通过选择引用当前循环索引， {{@index}}

  {{＃each array}} 
 {{ @index}}：{{this}} 
 {{/ each}} 
  

对象迭代，请使用 {{@key}} 来代替：

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

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

1. 第一个 @index 将成为零$。
   
2. 零在布尔上下文中是伪造的。

可以这样做：

  {{＃each this}} 
< input type =radiovalue ={{value} }{{#unix @index}} checked =checked{{/ unless}} /> 
 {{/ each}} 
  

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

当然，挑选任何其他索引都比较困难，并且可能会修改输入数据（与以前一样）或添加某种 {{＃if_eq}} 自定义帮助程序。 / p>

How can i get a easy and clear way that set the first radio button is checked in Handlebars template. tks

template:

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

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

expect render:

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

thanks all.

解决方案

{{#each}} in Handlebars doesn't give you access to the iteration number or anything like that so you can't do it without altering your template and data a little bit:

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

and then add sel values to your data:

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

Demo: http://jsfiddle.net/ambiguous/27Ywu/

You could of course just set sel: true on the first element of your data array:

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

Demo: http://jsfiddle.net/ambiguous/yA5WL/

Alternatively, use jQuery to check the first one after you have the HTML:

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

Demo: http://jsfiddle.net/ambiguous/sPV9D/

---

Newer versions of Handlebars do 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}}

So, if you're using the latest Handlebars, you can do something special by using the fact that:

1. The first @index will be zero.
2. Zero is falsey in a boolean context.

That lets you do this:

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

Demo: http://jsfiddle.net/ambiguous/PHKps/1/

Of course, picking out any other index is harder and leaves you either modifying the input data (as before) or adding some sort of {{#if_eq}} custom helper.

这篇关于设置第一个单选按钮在句柄模板中被选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！