Backbone, stackmob sub-models - render to html - templates

Question

I am really new to backbone so any help on this would be awesome, even just to point me in the direction of some resources related to this.
I have tried to create a fiddle but it won't work the same as on my machine: http://jsfiddle.net/Wh2H5/
Basically what I need to do is render the array of objects(see the image below) as parts of the template.
This is the view I am rendering:
var ListView = Backbone.View.extend({
tagName: 'ul',
className : 'nav nav-list',
initialize: function() {
this.collection.bind('all', this.render,this);
this.template = _.template($('#item-list').html());
},
render:function (eventName) {
$(".bike_list ul").empty();
this.collection.each(function(bike){
this.$el.append(this.template(bike.toJSON()));
},this);
return this;
}
});
So to see the problem copy the code from this fiddle and paste it to a html document.

Answer 1

I can highly recommend Marionette on top of Backbone to save you a lot of boiler plate for managing Views.

Answer 2

You can in-line javascript in your template and loop through the part_rel array and render the objects accordingly. The code would look like:
<% _.each(part_rel,function(part) { %>
<li>
Part Name: <%= part.name %>
After Hp: <%= part.after_hp %>
</li>
<% }); %>
Here is the code added to your template:
<script type="text/template" id="item-list">
<li class="<%= model %>">
<strong>Bike ID:</strong> <%= bikes_id %><br>
<strong>Model:</strong> <%= model %><br>
<strong>Before cc:</strong> <%= before_cc %><br>
<strong>Before ci:</strong> <%= before_ci %><br>
<strong>Before HP:</strong> <%= before_hp %><br>
<strong>Before torque:</strong><%= before_torque %><br>
<strong>Related parts:</strong><ol>
<% _.each(part_rel,function(part) { %>
<li>
Part Name: <%= part.name %>
After Hp: <%= part.after_hp %>
</li>
<% }); %>
</ol>
<br><br>
</li>
</script>
Read up on underscore's documentation for template. Also, here is a working example, http://jsfiddle.net/mFwsK/.