चयनित आइटम को टेम्पलेट मान

Question

पर आधारित किसी चयनित सूची में सेट करें, आप टेम्पलेट से वर्तमान मान के साथ चयन नियंत्रण को सही तरीके से पूर्व-पॉप्युलेट कैसे कर सकते हैं?

मेरे पास एक रिकॉर्ड संपादित करने के लिए एक साधारण रूप है जहां चयनित रिकॉर्ड के मान पूर्व-पॉप्युलेट किए जाते हैं जब फॉर्म दिखाया जाता है। इस तरह यह है कि:

<input type="text" id="project_name_edit" value="{{selected_name}}"> 

लेकिन जहां मैं एक का चयन नियंत्रण मैं टेम्पलेट मूल्य interogate करने में सक्षम हो और सशर्त सही विकल्प के लिए selected='selected' गुण सेट की जरूरत का उपयोग कर रहा हूँ।

<select id="project_status_edit" value="{{selected_status}}"> 
     <option>GOOD</option> 
     <option>BAD</option> 
     <option>UGLY</option> 
</select> 

हैंडलबर्स.जेएस #IF सहायक प्रदान करता है लेकिन यह केवल सच्चाई या झूठा देता है।

मैं शायद इसे विभिन्न तरीकों से हैक कर सकता हूं लेकिन ऐसा लगता है कि एक मानक समाधान होगा जहां एक मानक समाधान होगा।

Answer 1

आप एक सहायक का उपयोग कर सकते हैं:

Handlebars.registerHelper('selected', function(foo, bar) { 
    return foo == bar ? ' selected' : ''; 
}); 

जो तुम तो साथ कॉल कर सकते हैं:

<select id="project_status_edit"> 
    <option{{selected foo "GOOD"}}>GOOD</option> 
    <option{{selected foo "BAD"}}>BAD</option> 
    <option{{selected foo "UGLY"}}>UGLY</option> 
</select> 

का उपयोग करना:

{"foo":"UGLY"} 

इसे यहाँ का प्रयास करें:

http://tryhandlebarsjs.com/

हालांकि यह मुझे इसे सहेजने के लिए प्रतीत नहीं होता है। :(

Answer 2

मुझे लगभग एक समान समस्या थी, लेकिन मेरे द्वारा गुजरने वाले मूल्य संख्याएं थीं और मेरा मानना ​​है कि मेरे पास उस विशिष्ट मामले के लिए एक क्लीनर समाधान है, जो हैंडलबर्स जादू के आधार पर है।

टेम्पलेट में:

<select name="button-style" id="button-style" _val="{{button_style}}"> 
    <option value="1">Primary Style</option> 
    <option value="2">Secondary Style</option> 
</select> 

आप मूल रूप से विशेषता आप _val के साथ चयनित करना चाहते हैं की संख्या गुजरती हैं। यह केवल ऐसे मामले में उपयोगी होता है जहां प्रत्येक विकल्प में लगातार संख्यात्मक मूल्य होता है। यह भी ध्यान दें, अगर आप इस विशेषता 'मान' को नाम देते हैं, तो इसे डिफ़ॉल्ट रूप से अधिलेखित/अनदेखा कर दिया जाएगा, जो पहले विकल्प का चयन करता है।

अब आप अपने जे एस फ़ाइल में .rendered कॉलबैक में:

Template.templateName.rendered =() -> 
    var btn_style = $('#button-style').attr('_val') 
    $('#button-style option:nth-child(' + btn_style + ')').attr('selected', 'selected') 

यह केवल इस चयन क्षेत्र है जो मूल्य हम चाहते हैं से मेल खाती है में 'वें' विकल्प का चयन।

Answer 3

चयनित उत्तर अब और काम नहीं करता है। यह एक पुराना सवाल है, लेकिन मुझे इस साधारण चीज को समझने में कठिन समय था। यहाँ मेरी समाधान है: एचटीएमएल

Handlebars.registerHelper('selected', function(key, value){ 
     return key == value? {selected:'selected'}: ''; 
}); 

उल्का के वर्तमान संस्करण में, हम निर्धारित नहीं कर सकते मूल्य बिना गुण, और उल्का या तो {{#if}} का उपयोग करते हुए अनुमति नहीं है। लेकिन सहायक को पास की गई वस्तुओं को कुंजी = मूल्य जोड़े में परिवर्तित किया जाता है और इंजेक्शन दिया जाता है।

अद्यतन

उपयोग UI.registerHelper के बजाय नया में Handlebars.registerHelper (> 0.8) उल्का के संस्करणों के बाद से Handlebars नाम स्थान का मूल्यह्रास हुआ है (https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated)।

Answer 4

मैंने यह फ़ंक्शन बनाया है। अपने मामले

selectedOption=function(){ 
     selectedOpt=document.getElementById("yourTagId_Select"); 
     var att = document.createAttribute("selected"); 
     att.value = "selected"; 
     idObj=Session.get("idObj"); 
     var lib = yourCollection.find({'column._id':idObj}).fetch();  
     for (var i = 0; i < selectedOpt.length; i++) { 
      if (selectedOpt[i].value==lib._id._str){    
       return selectedOpt[i].setAttributeNode(att); 
      } 
     }; 


    } 

अपने कार्य

selectedOption फोन के बाद() के लिए अनुकूल;

Answer 5

मैं अपने प्रोजेक्ट में निम्नलिखित (मामले में किसी की जरूरत है यह :)

<select class="form-control" id="maritalStatusList" > 
     <option {{selectedMaritalStatus "Single"}}> Single</option> 
     <option {{selectedMaritalStatus "Married"}}> Married</option> 
    </select> 

और इस्तेमाल

Template.editApplicant.helpers({ 
    selectedMaritalStatus: function(key){ 
     return key == this.maritalStatus ? 'selected' : ''; 
    } 
}); 

"this.maritalStatus" वर्तमान दस्तावेज़ से वैवाहिक स्थिति हो जाता है (आवेदक) ।

उपयोग निम्न कोड, आप सभी के लिए

maritalStatus: $('#maritalStatusList').val() 

धन्यवाद डेटाबेस में मूल्य को बचाने के लिए ..