đặt nút radio đầu tiên được chọn trong thanh ghi mẫu

Question

Làm cách nào để có được cách dễ dàng và rõ ràng cách đặt nút radio đầu tiên trong mẫu Handlebars. tks

mẫu:

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

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

mong đợi render:

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

cảm ơn tất cả.

Answer 1

{{#each}} trong tay lái không cung cấp cho bạn truy cập vào số lần lặp hoặc bất cứ điều gì như thế nên bạn không thể làm điều đó mà không thay đổi mẫu và các dữ liệu của bạn một chút:

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

và sau đó thêm giá trị sel để dữ liệu của bạn:

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/

bạn có thể dĩ nhiên chỉ cần đặt sel: true trên phần tử đầu tiên của mảng dữ liệu của bạn:

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

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

Ngoài ra, sử dụng jQuery để kiểm tra đầu tiên sau khi bạn có 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/

---

Phiên bản mới hơn của Handlebars do give you access to the index:

Khi vòng lặp thông qua các mục trong each, bạn có thể tùy chọn tham khảo các chỉ số vòng lặp hiện qua {{@index}}

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

Đối tượng lặp đi lặp lại, sử dụng {{@key}} thay vì:

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

Vì vậy, , nếu bạn đang sử dụng các Handlebars mới nhất, bạn có thể làm điều gì đó đặc biệt bằng cách sử dụng thực tế là:

1. Đầu tiên @index sẽ bằng không.
2. Zero là falsey trong ngữ cảnh boolean.

đó cho phép bạn làm điều này:

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

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

Tất nhiên, chọn ra bất kỳ chỉ số khác là khó khăn hơn và để lại cho bạn hoặc sửa đổi dữ liệu đầu vào (như trước đây) hoặc thêm một số loại {{#if_eq}} trình trợ giúp tùy chỉnh.

Answer 2

index sẽ được thông qua như là đối số thứ hai,

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