HBS: Template object key/values

Outputs each key value as a select option

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script type="text/x-handlebars-template" class="template">
    <p>Select:</p>
    <select class="flush">
        {{#each options}} 
            <option value="{{this}}">{{@key}}</option>
        {{/each}}
    </select>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

JavaScript

console.clear();

// https://github.com/wycats/handlebars.js/pull/272

var options = {
    MATH: Math.random(),
    ENGLISH: 'Question 2: Only numbers allowed',
    SCIENCE: 'Question 3: Maximum 30 characters',
    FRENCH: 'Question 4: Please enter a valid email address'
};

var template = Handlebars.compile($('.template').html());

$('body').empty().html(template({options: options}));