使用handlebars.js在下拉菜單中設置選定的值

在我的項目中使用了handlebars.js模板引擎。每次，如果我想在下拉列表中設置選定的值，我就像下面提到的代碼一樣。當我得到「優先級」的值時，我是這樣做的。是否有任何方法可以用簡單的方法做到這一點，因爲如果我得到超過20選擇我的選擇元素，我的代碼變得冗長。使用handlebars.js在下拉菜單中設置選定的值

求索我priorityType = 「介質」

jquery code --> 

if(priorityType === "high")     
        priorityHigh = "selected"; 
       else if(priorityType === "medium")  
        priorityMedium = "selected"; 
       else if(priorityType === "low")  
        priorityLow = "selected"; 

       else if(priorityType === "none")   
        priorityNone = "selected"; 

data='{"priorityHigh":"'+priorityHigh+'","priorityMedium":"'+priorityMedium+'","priorityLow":"'+priorityLow+'","priorityNone":"'+priorityNone+'"}'; 
var jsonData=JSON.parse(data); 

var source= " <select class="selectPriortyCl"> 
       <option value="High" {{priorityHigh}} >High</option> 
       <option value="Medium" {{priorityMedium}} >Medium</option> 
       <option value="Low" {{priorityLow}} >Low</option>      
       <option value="None" {{priorityNone}} >None</option> 
    </select>"

變種模板= Handlebars.compile（源）; var result = template（jsonData）;

我想這個比較中handlebars.js

if(priorityType === "high") ..

在此先感謝..

來源

2013-07-16 user2587222

你可以寫幫手您的問題 –

@zahidRiaz ..難道你知道這方面的任何幫助文件.. – user2587222

你可以寫一個由你自己。 'Handlebars.registerHelper（ 'equalsTo'，函數（V1，V2，期權）{ \t如果（V1 V2 = =）{ \t回options.fn（本）; \t}其他{ \t回報的選擇。（this）; \t} }）;' –

這裏是你如何在車把使用助手。這裏是鏈接工作demo

Handlebars.registerHelper('equalsTo', function(v1, v2, options) { 
    if(v1 == v2) { return options.fn(this); } 
    else { return options.inverse(this); } 
}); 

var priorityType = "medium"; 
var data = {priorityType: priorityType}; 

var source= " <select class=\"selectPriortyCl\"> " + 
       "<option value=\"High\" {{#equalsTo priorityType \"high\"}}selected{{/equalsTo}}>High</option>"+ 
       "<option value=\"Medium\" {{#equalsTo priorityType \"medium\"}}selected{{/equalsTo}}>Medium</option>"+ 
       "<option value=\"Low\" {{#equalsTo priorityType \"low\"}}selected{{/equalsTo}}>Low</option>"+ 
       "<option value=\"None\" {{#equalsTo priorityType \"none\"}}selected{{/equalsTo}}>None</option>"+ 
       "</select>"; 

var template = Handlebars.compile(source); 
alert(template(data));

來源

2013-07-17 06:00:51

非常感謝Zahid ..我完全沒有使用你的方法..但我從你的東西得到另一個想法..再次感謝很多... – user2587222

我知道這已經回答了，但我喜歡在助手使用jQuery。

Handlebars.registerHelper('selected', function(val1, options) { 
     var div = $('<div>').html(options.fn(this)); 
     div.find("[value="+val1+"]").attr('selected', true); 
     return div.html(); 
    });

然後你就可以插入塊助手在實際選擇

<label>Grade:</label><br/> 
<select name='grade'> 
{{#selected grade}} 
    <option value='K'>K</option> 
    <option value='1'>1</option> 
    <option value='2'>2</option> 
    <option value='3'>3</option> 
    <option value='4'>4</option> 
    <option value='5'>5</option> 
    <option value='6'>6</option> 
    <option value='7'>7</option> 
    <option value='8'>8</option> 
    <option value='9'>9</option> 
    <option value='10'>10</option> 
    <option value='11'>11</option> 
    <option value='12'>12</option> 
{{/selected}} 
</select>

來源

2015-02-12 14:43:04

使用handlebars.js在下拉菜單中設置選定的值

回答

相關問題