Question

在我的项目中使用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 result = template（jsonData）;

我想在handlebars.js中进行比较

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

提前致谢..

Answer 1

以下是如何在把手中使用助手。这是工作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));

Answer 2

我知道这已经得到了解答，但我喜欢在帮助器中使用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>

使用handlebars.js在下拉列表中设置选定的值

2 个答案: