title: Populate Backbone Collection to table
body: <p>I already fetch JSON data but I have a difficulties on populating it on the table. Any help? </p>
  
  <p>I have already response json data:</p>
  
  <pre><code>data                                    Object { 4c064462f170f63d57f55ab55e6b36f1={...}, b4f68bc5c045d2e88840995a47f7ddf5={...}}
      4c064462f170f63d57f55ab55e6b36f1    Object { rowid="4c064462f170f63d57f55ab55e6b36f1", id="1", qty="3", more...}
      b4f68bc5c045d2e88840995a47f7ddf5    Object { rowid="b4f68bc5c045d2e88840995a47f7ddf5", id="6", qty="2", more...}
  </code></pre>
  
  <p>This is my JS Code</p>
  
  <pre><code>var Feed = Backbone.Model.extend({  
       });
  
  var Stream = Backbone.Collection.extend({    
      url: function () {
          return BASE_URL + 'api/remotejson';
      },
      model: Feed,
      parse: function (response) {        
          var tags = response.data;
          return tags;
      } }); 
  
  var FeedView = Backbone.View.extend({
      tagName: "tr",
      template: $("#feedTemplate").html(),
      render: function () {
          var tmpl = _.template(this.template);
          this.$el.html(tmpl(this.model.toJSON()));
          return this;
      } });  
  
  var StreamView = Backbone.View.extend({
      el: $("#main-section"),
      initialize: function () {        
          this.collection = this.options.collection;
          this.render();
          this.collection.on("add", this.renderFeed, this);        
      },
      render: function () {
          var that = this;
          this.collection.fetch({success: function () {
                  _.each(that.collection.models, function (item) {
                      that.renderFeed(item);
                  }, this);       
              }
          });
      },
      renderFeed: function (item) {        
          var feedView = new FeedView({
              model: item
          });
  
          this.$el.find('#options-table tbody').append($(feedView.render().el).hide().fadeIn('slow'));
      },    
      loadMore: function () {
          this.collection.page += 10;
          this.render();        
      } });
  </code></pre>
  
  <p>This is my html template</p>
  
  <pre><code>&lt;div id="main-section"&gt;
      &lt;table class="table table-striped" id="options-table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Quantity&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
      &lt;/table&gt;
      &lt;script id="feedTemplate" type="text/template"&gt;
          &lt;td&gt;&lt;% rowid %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;% qty %&gt;&lt;/td&gt;
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              var collection = new Stream();
              var streamView = new StreamView({collection: collection});
          });
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>