Đầu vào radio với các mẫu Mustache

Question

Tôi đang cố gắng sử dụng các mẫu ria mép để hiển thị các biểu mẫu rất đơn giản, tuy nhiên, một trong các biểu mẫu có một bộ sưu tập các nút radio. Tôi không thể tìm ra cách chọn nút radio phù hợp khi biểu mẫu được hiển thị.

Đây có phải là thứ đơn giản và tôi chỉ thiếu một thứ gì đó, hay khía cạnh "logic-ít" của bộ ria thực sự ngăn tôi làm thứ gì đó cơ bản như nút radio?

Dữ liệu của tôi trông giống như sau:

data = { gender: 'female' } 

<form> 
    <label><input type="radio" name="gender" value="male"> Male</label> 
    <label><input type="radio" name="gender" value="female"> Female</label> 
</form> 

Answer 1

Bạn có thể làm điều này bằng cách sử dụng lambda:

var data = { 
    gender: 'female', 
    wrapped: function() { 
     return function (text) { 
      return text.replace('value="' + this.gender+'"', 'value="' + this.gender+'" checked'); 
     } 
    } 
}; 

<form> 
    {{#wrapped}} 
    <label><input type="radio" name="gender" value="male"> Male</label> 
    <label><input type="radio" name="gender" value="female"> Female</label> 
    {{/wrapped}} 
</form> 

Có một cái nhìn tại full example tôi sử dụng nếu bạn có bất kỳ rắc rối.

Cập nhật:

Justin Hileman chỉ cho tôi một cách khác để làm điều này:

<form> 
<label><input type="radio" name="gender" value="male"{{#maleIsDefault}} checked{{/maleIsDefault}}> 
Male</label> 
<label><input type="radio" name="gender" value="female"{{#femaleIsDefault}} checked{{/femaleIsDefault}}> Female</label> 
</form> 

var data = { 
     gender: 'female', 
     maleIsDefault: function() { 
      return this.gender == 'male'; 
     }, 
     femaleIsDefault: function() { 
      return this.gender == 'female'; 
     } 
}; 

Full dụ here.

Answer 2

Một tùy chọn khác, với coffeescript (chưa được kiểm tra) ...

// define radio button options in an array 
genders = [ 
    { code: 'M', name: 'Male' } 
    { code: "F", name: "Female" } 
] 

// flag the current object as "selected" 
for g in genders 
    if g.code == existingGenderValue 
    g.selected = true 

Sau đó, trong bộ ria mép, tự động tạo các nút của bạn dựa trên giới tính mảng:

{{#genders}} 
    <label class="radio"> 
    <input type="radio" name="gender" value="{{code}}" {{#selected}} checked="checked" {{/selected}}> 
    {{name}} 
    </label> 
{{/genders}}