title: BackboneJS + HandlebarsJS - How to avoid HTML to be rendered multiple times
body: <p>I have a Backbone application where I trigger a View through an event-click and the Views HTML gets rendered with HandlebarsJS and displays data from a collection. So far it works except that my HTML gets repeated for each entry</p>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;header&gt;
     &lt;span class="blackdot" aria-hidden="true" /&gt;
     &lt;h1&gt;Overview&lt;/h1&gt;
  &lt;/header&gt;
  &lt;div&gt;
     &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;{{brand}}&lt;/a&gt;
          &lt;p&gt;{{country}}&lt;/p&gt;
      &lt;/li&gt; 
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Right now, it duplicates the whole HTML code-block, including <code>&lt;header&gt;</code> and <code>&lt;h1&gt;</code>-tag for each entry but what I want to achieve is that my HTML would look like this:</p>
  
  <pre><code>&lt;header&gt;
     &lt;span class="blackdot" aria-hidden="true" /&gt;
     &lt;h1&gt;Overview&lt;/h1&gt;
  &lt;/header&gt;
  &lt;div&gt;
     &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Audi&lt;/a&gt;
          &lt;p&gt;Germany&lt;/p&gt;
       &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Hyundai&lt;/a&gt;
          &lt;p&gt;South Korea&lt;/p&gt;
       &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Fiat&lt;/a&gt;
          &lt;p&gt;Italy&lt;/p&gt;
       &lt;/li&gt;  
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My backbone View looks like this:</p>
  
  <pre><code> define(['backbone','handlebars', 'text!templates/Cars.html'],
  
      function(Backbone,Handlebars, Template) {
  
          'use strict';
  
          var CarsView = Backbone.View.extend({
  
              template: Handlebars.compile(Template),
  
              events: {
              },
  
              initialize: function () {
              _.bindAll(this, 'render');
              },
  
              render: function() {
                 var self = this;
                 self.collection.each(function(model){
                      self.$el.append(self.template({
                          brand:model.get('brand'),
                          country:model.get('country')
                          })
                      );
                 });
  
                  return this;
              }
  
          });
  
          return CarsView;
  
      }
   );
  </code></pre>
  
  <p>Of course i could define the most of the HTML on the index page, wrap it in a DIV and do display:none and only write the <code>&lt;li&gt;</code>-tag in the Handlebars HTML template, but I want to avoid that and since the data what is returned are strings, I cant do the <code>{{#each}}</code>-thing... so, is there any solution for this?</p>