CODEWITHSUNDEEP
jqueryhtmlhandlebars.jstemplate-engine
gauti
gauti

Reputation: 1274

set selected value in drop down using handlebars.js

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

Upvotes: 3

Views: 5580

Answers (2)

Ryan H
Ryan H

Reputation: 547

I know this has already been answered but I like to use jQuery in the helper.

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

Then you can insert the block helper in the actual select

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

Upvotes: 1

Zahid Riaz
Zahid Riaz

Reputation: 2889

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

Upvotes: 4

Related Questions