Look at the standard problem:
Your handlebars template contains a Selectbox to display a the status of a task:
<select name="status" id="Status" class="binf-selectpicker" data-style="binf-btn-warning">
<select name="status" id="Status" class="binf-selectpicker" data-style="binf-btn-warning">
{{#select status}}
<option value="0" selected="">Pending</option>
<option value="1">In Process</option> <option value="2">Issue</option>
<option value="3">On Hold</option>
<option value="-1">Completed</option>
<option value="-2">Cancelled </option>
{{/select}}
</select>
And the values you receive from the REST Calls are between -2 and 3.
How can you transfer this in a “selected” clause in the html select box?
Easy.
Ass a select helper in your main marionette view:
Handlebars.registerHelper('select',
function (selected, options) {
Handlebars.registerHelper('select', function (selected, options)
{ return options.fn(this).replace( new RegExp(' value=\"' + selected + '\"'),
'$& selected="selected"'); });
This handlebars helper named “select” will examine the coding tagged betweern a {{select}} and a {{/select}} in your handlebars template and insert at the option clause which is selected a ‘selected=”” ‘ clause. Then the Selectbox is ready to use.
Simply add a
status: this.model.get('status'),
to be returned in your template helper and the
{{#select status}}
...
{{/select}}
will trigger your select box helper to check for the v ariable status and to add a selected at the proper place.
Thats the magic behind the handlebars select helpers.
