Edit in JSFiddle

// A Grid Row
var GridRow = Backbone.Marionette.ItemView.extend({
    template: "#row-template"
});

// the grid row
var GridView = Backbone.Marionette.CompositeView.extend({
    tagName: "table",
    template: "#grid-template",
    itemView: GridRow,
    
    appendHtml: function(collectionView, itemView, index) {
        var headerTemplate = _.template( $("#row-header").html());
        collectionView.$("tbody").append(headerTemplate(itemView.model.toJSON()));
        var wrapperTemplate = _.template( $("#row-wrapper").html()); 
        collectionView.$("tbody").append(wrapperTemplate(itemView.model.toJSON()));
        collectionView.$("#insidecollapsed" + itemView.model.get("startdate")).append(itemView.el);
    }
});

// ----------------------------------------------------------------
// Below this line is normal stuff... models, templates, data, etc.
// ----------------------------------------------------------------
var dates = [
    {
  "apps": [
    {
      "appdate": "11-3-2012",
      "rate": 6
    }
  ],
  "startdate": "11-3-2012"
},
             {
  "apps": [
    {
      "appdate": "11-2-2012",
      "rate": 6
    }
  ],
  "startdate": "11-2-2012"
},{
  "apps": [
    {
      "appdate": "11-1-2012",
      "rate": 6
    },
    {
      "appdate": "11-1-2012",
      "rate": 5
    }
  ],
  "startdate": "11-1-2012"
}
];
    

var User = Backbone.Model.extend({});

var UserCollection = Backbone.Collection.extend({
    model: User
});

var data = new UserCollection(dates);

var gridView = new GridView({
    collection: data
});

gridView.render();
console.log(gridView.el);
$("#grid").append("<div id='accordion2' class='accordion'></div>");
$("#grid").append(gridView.el);

<script id="grid-template" type="text/template">
    <thead>        
        <tr>
            <th>Start Date</th>
            <th>Rate</th>
        </tr>
    </thead>
    <tbody></tbody>
</script>

<script id="row-template" type="text/template">
        <% for (var i = 0; i < apps.length; i++) { %>
        <tr>
        <td><%= apps[i].appdate %></td>
        <td><%= apps[i].rate %></td>
        </tr>
    <% }; %>   
</script>
                
<script id="row-wrapper" type="text/template">
    <tr>
        <td colspan="2">
            <div class="accordion-body collapse" id="<%= startdate %>" style="height: 0px;">
                <div id="insidecollapsed<%= startdate %>" class="accordion-inner">
                </div>
            </div>
        </td>
    </tr>
</script>
                
<script id="row-header" type="text/template">
    <tr>
        <td>
            <div class="accordion-group">
            <div class="accordion-heading">
                <a href="#<%= startdate %>" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle">
                    <%= startdate %>
                </a>
            </div>
            </div>
        </td>
    </tr>
</script>
                
<div id="grid">
</div>

table, tr, td, th, thead {
    border: 2px solid #ccc;
}

thead {
    background-color: #555;
    color: #fff;
}