meteorhandlebars.jsspacebars

inject div element between handlebars each

I want to place a div after fourth element of #each 

<script type="text/template" id="template">
{{#each names}}
  {{name}}
{{/each}}
</script>

If there are no 4 elements then in last. How can I do achieve this?

Solution

  • html

    {{#each names}}
  {{name}}
  {{#if fourth @index count}}
     <div></div>
  {{/if}}
{{/each}}

    js

    Template.templateName.helpers(
   {
      count: function(){
           //if you are using iron router to return names
           return Router.current().data().names.find().count();
           // or you could get length from a reactive variable or session 
           // or if you are returning names as a helper, then set the length there
      },
      fourth: function(i, count){
         i = i+1;
         return i%4===0 || count===i;
      }
   }
)