javascript - Handlebars loop to assign value to attribute -

i have values of array length dynamic. have image holder of 4. means if length of array 2, have 2 filled holder , left 2 empty holder. unfilled holder div

i've tried below code doesn't suite needs, because produce div according length of arrays.

{{#each product.image}} <div style="background-image:url(http://example.com/{{this}})"></div> {{/each}} <div></div> <div></div> <div></div> 

if want max number of 4 divs, filled data there , left empty if no data can use custom helper function:

handlebars.registerhelper('times', function (index, options) {         var result = '';     for(var = 0; < 4; i++) {        if(options.data.root.product.image[i]){           result += '<div style="background-image:url(https://upload.wikimedia.org'+options.data.root.product.image[i]+')"></div>';        } else {           result += '<div>empty div</div>';        }           }    return result; }); 

and in html:

{{#times this}} {{/times}} 

check fiddle: fiddle