Render all json objects? - json

Question

I trying to render all objects names from my json file /api/tables.json into ? <li>there</li>'s
var Table = Backbone.Model.extend({
defaults: {
name: 'table',
id: 1
}
});
var Tables = Backbone.Collection.extend({
model: Table,
url: 'api/table.json'
});
var TablesView = Backbone.View.extend({
el: '#mydiv',
template: _.template($("#table-template").html()),
initialize : function() {
this.coll = new Tables()
this.listenTo(this.coll, 'reset', this.render);
this.coll.fetch();
},
render : function() {
this.$el.html(this.template({ table: this.coll.toJSON() }));
return this;
}
});
This is my template in index.html :
<div id="mydiv"></div>
<script type="text/template" id="table-template">
<ul>
<% _.each(table, function(table) { %>
<li><%= table.name %></li>
<% }); %>
</ul>
</script>
data from json file:
[
{
"name": "Table 1",
"id": 1
},
{
"name": "Table 2",
"id": 2
},
{
"name": "Table 3",
"id": 3
},
{
"name": "Table 4",
"id": 4
}
]
Please help me.... I don't know where is fault or what is missing.

Answer 1

I highly recommend using Backbone.Marionette plugin, which supports rendering of lists out of the box. You don't have to write boilerplate code for it. Just use CollectionView or CompositeView with the collection given as constructor arguments and define an ItemView for them (li element)