How to display collection to template? - backbone.js

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

Answer 2

Ok #Amateur let's try to solve your need properly.
Attention: all code has been written in the fine air don't expect it to work just out of the box, use it as inspiration.
First of all is not very good idea to use programatic logic in your templates, it is just a design decision, I don't want to look very academic here but I think if you are too flexible with this you can finish with a very difficult to maintenance code.
So, the idea is to manufacture the data so the template has not to make any decision/calculation. And if you need a loop into your template let's use sub-templates.
What I understand from your code example is that you have a Collection like this:
[
{
"id": "1",
"cost": 100,
"name": "Amateur"
},
{
"id": "2",
"cost": 200,
"name": "Other name"
},
{
"id": "3",
"cost": 300,
"name": "Other name again"
},
]
And you want to render something like this:
<table>
<tr>
<td>Name</td>
<td>Cost</td>
</tr>
<tr>
<td>Amateur</td>
<td>100</td>
</tr>
<tr>
<td>Other name</td>
<td>200</td>
</tr>
<tr>
<td>Other name again</td>
<td>300</td>
</tr>
</table>
As I have read in another (duplicated) question you have sent, you also want to only render cost if the name == "Amateur", like this:
<table>
<tr>
<td>Name</td>
<td>Cost</td>
</tr>
<tr>
<td>Amateur</td>
<td>100</td>
</tr>
<tr>
<td>Other name</td>
<td>--</td>
</tr>
<tr>
<td>Other name again</td>
<td>--</td>
</tr>
</table>
Iteraction
For the iteration we are gonna solve it with sub-templates.
Master template:
<script type="text/template" id="template-elements">
<table>
<tr>
<td>Name</td>
<td>Cost</td>
</tr>
</table>
</script>
Sub-template
<script type="text/template" id="template-element">
<tr>
<td><%= name %></td>
<td><%= cost %></td>
</tr>
</script>
In order to make it more elegant lets use also a View for the Collection and a SubView for each Model.
var MyModel = Backbone.Model.extend();
var MyCollection = Backbone.Collection.extend({
model: MyModel
});
var MyModelView = Backbone.View.extend({
template: _.template( $("#template-element").html() ),
render: function(){
this.$el.html( this.template( this.model.toJSON() ) );
return this;
}
});
var MyCollectionView = Backbone.View.extend({
template: _.template( $("#template-elements").html() ),
render: function(){
this.$el.html( this.template() );
this.collection.each( function( model ){
var view = new MyModelView({ model: model });
this.$el.find( "table" ).append( view.render().el );
});
return this;
}
});
Decorators
We have solved the iteration issue, now we are gonna implement the logic that hides the Model.cost when Model.name != "Amateur".
Let's implement a method that returns the attributes of the Model already cooked for the template:
var MyModel = Backbone.Model.extend({
toJSONCooked: function(){
var json = this.toJSON();
if( this.get( "name" ) != "Amateur" ) {
json.cost = "--";
}
return json;
}
});
We can use this method to feed the template:
var MyModelView = Backbone.View.extend({
template: _.template( $("#template-element").html() ),
render: function(){
this.$el.html( this.template( this.model.toJSONCooked() ) );
return this;
}
});