title: Backbone and Handlebars Rendering View with this.$el.html
body: <p>I have started playing with backbone and Handlebars, the code below breaks at <code>this.$el.html(jsObject);</code> and gives next error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'html' of undefined tasks.js:26
  (anonymous function) tasks.js:26
  fire jquery.js:3119
  self.fireWith jquery.js:3231
  done jquery.js:9275
  callback jquery.js:9685
  </code></pre>
  
  <p>There is a done function to allow fetch to comeback before the JSON.parse comes in.  I have used <code>JSON.stringify</code> and <code>JSON.parse</code> as handlebars wants a JavaScript object and my api returns json (I am sure there is a better way). The <code>console.log(jsObject);</code> gives the correct handlebars generated html so not sure why it stops, I did want to do something like <code>var context = template(jsonObject.toJSON());</code> as this will work with block data in the code.</p>
  
  <p>Edit: I have cleaned this up to remove <code>JSON.stringify</code> and <code>JSON.parse</code>, and use toJSON() and put the full error in. Using Backbone 1.1.2 and JQuery v1.11.1.</p>
  
  <pre><code>var serverUrl           = 'http://test.local/'; 
  var Event = Backbone.Model.extend({});
  
  var EventCollection = Backbone.Collection.extend({
      model: Event,
      url: serverUrl + 'events'   
  });
  
  var EventListView = Backbone.View.extend({
      el: "#events",
      initialize: function(){
          this.render();              
      },
      render: function () {
          var events = new EventCollection;
          var eventsFetch = events.fetch({
              success : function(data){
                  events = ((data));
      //          console.log(events); 
              }       
          });
          eventsFetch.done(function(){
              var template = Handlebars.compile( $("#events-template").html() );
              var rendered = template(events.toJSON());
                  console.log(rendered);
              this.$el.html(rendered);
              return this;
          });     
      }
  }); 
  
  var EventListView = new EventListView();
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="events"&gt;&lt;/div&gt;
          &lt;script id="events-template" type="text/x-handlebars-template"&gt;
              &lt;table&gt;
                  {{#each []}} 
                  &lt;tr&gt;
                      &lt;td&gt;{{this.event_id}}&lt;/td&gt;
                      &lt;td&gt;{{this.entity_id}}&lt;/td&gt;
                      &lt;td&gt;{{this.event_title}}&lt;/td&gt;
                      &lt;td&gt;{{this.event_desc}}&lt;/td&gt;
                      &lt;td&gt;{{this.event_state}}&lt;/td&gt;
                      &lt;td&gt;{{this.id}}&lt;/td&gt;
                  &lt;/tr&gt;
                  {{/each}}
              &lt;/table&gt;
          &lt;/script&gt;
  &lt;script type="text/javascript" src="js/tasks.js" /&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>