Question

I am pretty new to backbone.js. I have the following setup

Scripts
|--App
|   |--collecions
|   |    |----students.js
|   |--model
|   |    |---student.js
|   |--views
|   |    |---Header-View.js
|   |    |---Stud-List-View.js
|   |    |---Stud-Item-List-View.js
|   |    |---StudView.js
|   |--app.js
|--Templates
|   |-----Header.htm
|   |-----StudTable.htm
|   |-----student.htm
|--main.js

The StudTable.html is like this —–

<table class="table table-condensed table-bordered">
<caption>Student Details </caption>
<thead>
    <tr>
        <th>
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>
            Age
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            {{firstname}}
        </td>
        <td>
            {{lastname}}
        </td>
        <td>
            {{age}}
        </td>
    </tr>
</tbody>

How can I render the collection send from here

function ($, _, Backbone, Student, StudList, HeaderView, StudView, ListView, CloneView) {
 var AppView = Backbone.Router.extend({
     routes: {
         "": "list",
         "students/clone": "clone",            
     },

     initialize: function () {
         var view = new HeaderView();
         return this;
     },
     clone: function () {
         var studs = new StudList();
         studs.fetch({
             success: function () {
                 $("#content").html(new CloneView({ collection: studs }).el);
             }
         });
     },

 });    

 return AppView;
});

How can I show the collection there in table with help of jQuery cloning without touching the format of html template? Is there any way we can clone into the table for each element in the collection?

I don’t want to use something like two views like this question

Render Html Table with underscore template engine

They have used two views: one for tbody and another for appending tr to tbody. I want to do it in a single view, with the help of the template mentioned above. Is it possible to do that?

Answer 1

Based on comments, you should use 2 views and 2 templates. I don’t see any advantage at all to the “cloning” mechanism in the original post – that’s not the Backbone way!

The main App view will render the main page HTML, and each individual <tr> view will represent a record in the database/datamodel. So render the main App view, and then loop through your JSON response to render each <tr> view individually.

From there, you can add, delete, and sort rows with ease. Because each view will be tied directly to a model instance, the two can “talk” to one another very easily (yay Backone!).

This site helped me learn the best way to organize my Backbone applications when i first started:
http://ricostacruz.com/backbone-patterns/#sub_views