HBS: Template array of objects
Loop through an array of objects.
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">
<div class="alert alert--error"></div>
<p>Errors:</p>
<ul class="flush">
{{#errors}}
{{#each this}}
<li>{{this}}</li>
{{/each}}
{{/errors}}
</ul>
</script>
SCSS
* {
-webkit-font-smoothing: antialiased;
}
body {
padding: 5%;
}
JavaScript
console.clear();
var errors = [{
0: Math.random()
}, {
1: 'Question 2: Only numbers allowed'
}, {
2: 'Question 3: Maximum 30 characters'
}, {
3: 'Question 4: Please enter a valid email address'
}];
var template = Handlebars.compile($('.template').html());
$('body').empty().html(template({errors: errors}));