使用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在下拉菜单中设置选定的值

回答

相关问题