title: Translate Handlebars block helpers using end tags into Meteor?
body: <p>In Meteor, I have an app where I make a list of items grouped by tags, where non-tagged items come first and then tagged items are hidden under a "tag header" drop down.</p>
  
  <p>I haven't touched this app since 0.8 came out, and I was using a block helper in a template which worked fine in pre-0.8... </p>
  
  <p><a href="http://jsfiddle.net/platypus117/1ey66hum/" rel="nofollow">See working jsfiddle here</a> </p>
  
  <pre><code>Handlebars.registerHelper('eachItem', function(context, options) {
    var ret = "";
  
    for(var i=0, j=context.length; i&lt;j; i++) {
        if(!context[i].tag){
           ret = ret + options.fn(context[i]);
        } else {
            if(i===0||!context[i-1].tag ||context[i-1].tag !== context[i].tag){
  
               ret = ret + '&lt;li class="list-group-item"&gt;&lt;a data-toggle="collapse" data-target="#'+ context[i].tag +'"&gt; Items tagged  '+context[i].tag + '&lt;/a&gt;&lt;/li&gt;&lt;div id="'+context[i].tag+'" class="collapse"&gt;';
            }
            ret = ret + options.fn(context[i]);
  
            if(i+1&lt;j &amp;&amp; context[i+1].tag !== context[i].tag){
                ret = ret + '&lt;/div&gt;';
            }
        }
    }
    return ret;
  });
  </code></pre>
  
  <p>But I'm struggling a bit to <a href="https://github.com/meteor/meteor/blob/556c0e28e94b9351cbf0b28e80a71a4e35f1362a/packages/spacebars/README.md" rel="nofollow">translate this into post-0.8 Meteor</a></p>
  
  <pre><code>The inserted HTML must consist of balanced HTML tags. You can't, for example, 
  insert "    &lt;/div&gt;&lt;div&gt;" to close an existing div and open a new one.
  </code></pre>
  
  <p>One idea I had was to render the non-tagged items and also the containers in a vanilla {{#each}} loop (with 2 different templates), and then do something like this</p>
  
  <pre><code>Template.myListContainer.rendered = function(){
      _.each(tags, function(tag){
          var tagged_items = _.filter(items, function(item){ return item.tag == tag; });
          _.each(tagged_items, function(item){
              UI.insert(UI.RenderWithData(listItemTemplate, { item : item }), tagContainer);
          });
      });
  }
  </code></pre>
  
  <p>Is there a simpler way to do this ? If the items come from a collection, will they keep their reactivity ? 
  Many thanks in advance !</p>