set selected value in drop down using handlebars.js

Question

Am using handlebars.js template engine in my project. Every time if i want to set selected values in drop down i done like below mentioned code.When ever i got "priority" values am doing like this.. is there any way to do this in easy method because if i get more than 20 option for my select element, my code becoming lengthy.

conside my 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);

i want this comparison in handlebars.js

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

Thanks in advance..

Answer 1

Here is how you can use helpers in handlebars. Here is link for working 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));