3

我在我的项目中使用handlebars.js 模板引擎。每次如果我想在下拉菜单中设置选定的值，我都会像下面提到的代码那样完成。当我得到“优先级”值时，我会这样做......有没有办法用简单的方法做到这一点，因为如果我得到超过 20 个我的选择元素的选项，我的代码变得冗长。

考虑我的 priorityType = "medium"

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>"

var template = Handlebars.compile(source); var 结果 = 模板（jsonData）；

我想在handlebars.js中进行这个比较

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

提前致谢..

4

2 回答 2

4

这是在车把中使用助手的方法。这是工作演示的链接

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-17T06:00:51.360 回答
1

我知道这已经得到解答，但我喜欢在帮助程序中使用 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-12T14:43:04.883 回答