Backbone.js and rendering table - backbone.js

Question

I'm new to Backbone.js and I've been having a real problem. I want to list firstname and lastname of members and put them in a table. For some reasons, I'm missing an important point and it's not working. My code:
var members = Backbone.Model.extend({
urlRoot: "/get_members",
});
var member_collection = Backbone.Collection.extend({
model : members,
url : "/get_members",
});
var member_list_view = Backbone.View.extend({
el : $('#members'),
initialize : function() {
this.collection.bind("add", this.render, this);
},
render: function() {
var $tbody = this.$("tbody");
_.each(this.model.models, function(data) {
this.$el.append(new member_view({model : data}).render().el);
}, this);
return this;
}
});
var member_view = Backbone.View.extend({
tagName : "tr",
template : _.template($("#member-template").html()),
render : function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var router = Backbone.Router.extend({
routes : {"members" : "member_router"},
member_router : function() {
var member_colls = new member_collection();
var member_viewer = new member_list_view({collection : member_colls});
member_colls.fetch();
}
});
My HTML:
<script type="text/template" id="member-template">
<table id="members">
<thead>
<tr><td>Firstname</td><td>Lastname</td></tr>
</thead>
<tbody>
<tr><td><%= firstname %></td><td><%= lastname %></td></tr>
</tbody>
</table>
</script>
Any help is greatly appreciated. Thanks,

Answer 1

Ok. There are many problems with the above code:
1) Temaplate member-template
You use the member template for the member_view however it contains the entire table instead of just the member row. Your template should be like:
<script type="text/template" id="member-template">
<td><%= firstname %></td><td><%= lastname %></td>
</script>​
2) member_list_view has this.collection.bind while render() uses this.model.models
You should have it consistent as:
var member_list_view = Backbone.View.extend({
el : $('#members'),
initialize : function() {
this.model.bind("add", this.render, this);
},
render: function() {
_.each(this.model.models, function(data) {
this.$el.append(new member_view({model : data}).render().el);
}, this);
return this;
}
});
For a full working version of your code, take a look at this JSFiddle