सेट किया गया पहला रेडियो बटन हैंडलबर्स टेम्पलेट

Question

मैं कैसे आसानी से और स्पष्ट प्राप्त कर सकता हूं जिसने पहला रेडियो बटन हैंडलबार टेम्पलेट में चेक किया है। टी.के.एस

टेम्पलेट:

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

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

उम्मीद प्रस्तुत करना:

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

धन्यवाद सब।

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

और फिर sel मान जोड़ने:

Answer 1

Handlebars में {{#each}} आप यात्रा नंबर या ऐसा कुछ के लिए पहुँच ताकि आप इसे अपने टेम्पलेट और डेटा में फेरबदल बिना नहीं कर सकते एक छोटा सा नहीं देता अपने डेटा के लिए:

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/

आप निश्चित रूप से सिर्फसेट कर सकते हैं अपने डेटा सरणी के पहले तत्व पर:

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/

---

हैंडलबार्स के नए संस्करण give you access to the index:

जब each में आइटम के माध्यम से पाशन, आप वैकल्पिक वर्तमान पाश सूचकांक के माध्यम से {{@index}}

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

संदर्भित कर सकते हैं वस्तु यात्रा के लिए, बजाय {{@key}} का उपयोग करें:

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

तो , यदि आप नवीनतम हैंडलबार्स का उपयोग कर रहे हैं, तो आप वें का उपयोग कर कुछ खास कर सकते हैं ई तथ्य यह है कि:

1. पहला @index शून्य होगा।
2. शून्य एक बूलियन संदर्भ में झूठा है।

आप यह कर देता है कि

:

{{#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>