CODEWITHSUNDEEP
jqueryhandlebars.js
francis
francis

Reputation: 307

helper to modify the behaviour of an each in handlebarsJS

My question is how can I access to the parameters "style" and "content" inside the template?, I modifed the helpers by creating another one (the base is teh same than in the official web), but I cannot access them.

The template

<div id=emoticons class="change_profile">
    {{#each all_avatars.images_male}}//this is an array['m1', 'm2, ...]'
        <img src="domain.com/{{this.content}}.png" style="{{this.style}}">
    {{/each}}
</div>

The helper

<script>
     Handlebars.registerHelper('each', function(icons_list) {
         var icons=[];
         var single={
             content:'',
             style:''
         }      
         for(var i=0, j=icons_list.length; i<j; i++) {
                    single.content = icons_list[i];
                    single.style='<something>';             
                    icons[i]=single; 
          }     
          return icons;
        });
</script>

The result

<div id=emoticons class="change_profile">

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]                             

</div>

Upvotes: 1

Views: 86

Answers (1)

ybo
ybo

Reputation: 17162

Based on Handlebars.js documentation (see Simple Iterators), your helper is supposed to return a string that is directly rendered into the document. As you are returning an array (icons), it is converted to string and rendered as is.

The following declaration for the helper should give better results, especially considering that calling options.fn(single) should let Handlebars.js transform the template for you img tag into the proper image.

<script>
    Handlebars.registerHelper('each', function(icons_list, options) {
        var icons="";
        var single={ content:'', style:'' };

        for(var i=0, j=icons_list.length; i<j; i++) {
            single.content = icons_list[i];
            single.style='<something>';             
            icons += options.fn(single); 
        }       
        return icons;
    });
</script>

That being said, it's not a good idea to put this kind of logic into a helper named each, that can quickly become confusing. I'd rather use the same each as the one declared in the documentation and replace the template:

<div id=emoticons class="change_profile">
    {{#each all_avatars.images_male}}
        <img src="domain.com/{{this}}.png" style="<something>">
    {{/each}}
</div>

Upvotes: 2

Related Questions