Question

I have been trying to display my data in collection to the template. On my rest console, I can see that the collection is populated; but I am not able to do it in my application. The code is as follows:
In view, the render is like:

  render : function() {
                var template = _.template(tpl,{
                       CollectionForTemplate: this.Collection.toJSON(),
                this.el.html(template);

                },

In view, the function that calls the fetch is as follows:

  loadTariffGrids: function(){
                       //fetch done here
                          if (Collection.length > 0) {
                                _.each(Collection, function(Model) {
                                       JSON.stringify(Model);
                           alert(JSON.stringify(Model));
                                }, this);
                          };
                          this.render;
                       }});


             },

And finally, the template is:

                       <span>
                       <%  _.each(CollectionForTemplate, function(model) { %>
                       </span>      
                       <td><%= model.cost %></td>

                        <%     }); %>

Where am I going wrong?

Answer 1

In your render, just use:

CollectionForTemplate: this.Collection;

Modify the view as follows:

var self = this;
//fetch done here
if (Collection.length > 0) {
                            _.each(Collection, function(Model) {
                                   JSON.stringify(Model);
                            }, this);
};
self.Collection = Collection;
self.render;

I think the collection that you pass to the template was not getting instanciated. So I use self to store the reference before control passes into the fetch function. I know my explanation is not good; I would like someone more experienced to offer you a better explanation. Hope this helps