Implementing a master view with multiple collections. Backbone.js

Question

EDIT my humble mockup of what I want to implement

---

I have defined such a view:

define(['jquery', 'underscore', 'backbone', 'text!_templates/gv_container.html', 'bootstrap/bootstrap-tab'], 
function($, _, Backbone, htmlTemplate, tab) {
    var GridViewContainer = Backbone.View.extend({
        id: 'tab-panel',
        template: _.template(htmlTemplate),
        events: { 'click ul.nav-tabs a': 'tabClicked' },
        tabClicked: function(e) {
            e.preventDefault();
            $(e.target).tab('show');
        },
        render: function() {
            this.$el.append(this.template);
            return this;
        }
    });
    return GridViewContainer;
}); // define(...)

The view's template looks like this:

<ul class="nav nav-tabs">
    <li class="active"><a href="#products">Products</a></li>
    <!-- other tabs -->
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="products">
        <!-- table with rows like { title, few more properties, edit|remove links } -->
    </div>
    <!-- other panes ... -->
</div>

Initially I thought I might use it (as common template for all collections at once).

Goal

I have three collections: products, categories, orders. And I want to insert each of them as tables on separate tab-panes. As for passing models to GridViewContainer I think I can wrap them in a composite model and simply pass the latter one as a part of options object to GridViewContainer view. What's next?

Product, Order, Category models have different properties, have different edit forms and probably event handling. This brings specificity. Should I use [EntityName]ListView per collection and then append it to GridViewContainer view?

---

ASIDE I use jquery.js, underscore.js, backbone.js, require.js, and ASP.NET MVC 4 on server side. I don't use Marionette.js

Answer 1

I would recommend to create a view for each model. You may create a abstract wich holds the shared stuff like table creation. Each view extends your abstract instead of Backbone.View.

var myAbstract = Backbone.View.extend({...})
var productsView = myAbstract.extend({...})

Then create a view, handling the wrapper (Tabs).

Example: http://jsfiddle.net/DC7rN/