Backbone, stackmob sub-models - render to html

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;
    }
});

enter image description here

So to see the problem copy the code from this fiddle and paste it to a html document.

You could break down your jsfiddle. If you have problems rendering items in a collection, start with some dummy data and hard wired templates in a simple view. Reading the docs at http://backbonejs.org/ thoroughly is also a good start. — Jakob Hohlfeld, Dec 06 '13 at 08:02

score 0 · Answer 1 · answered Dec 14 '13 at 20:00

0

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

answered Dec 14 '13 at 20:00

Dmitri Zaitsev

13,548
11
76
110

score 0 · Answer 2 · answered Dec 14 '13 at 20:54

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/.

Backbone, stackmob sub-models - render to html

2 Answers2