javascript - Implementing a master view with multiple collections. Backbone.js -

edit my humble mockup of want implement

---

i have defined such 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 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 rows { title, few more properties, edit|remove links } -->     </div>     <!-- other panes ... --> </div> 

initially thought might use (as common template collections @ once).

goal

i have 3 collections: products, categories, orders. , want insert each of them tables on separate tab-panes. passing models gridviewcontainer think can wrap them in composite model , pass latter 1 part of options object gridviewcontainer view. what's next?

product, order, category models have different properties, have different edit forms , event handling. brings specificity. should use [entityname]listview per collection , append gridviewcontainer view?

---

aside use jquery.js, underscore.js, backbone.js, require.js, , asp.net mvc 4 on server side. don't use marionette.js

i recommend create view each model. may create abstract wich holds shared stuff table creation. each view extends abstract instead of backbone.view.

var myabstract = backbone.view.extend({...}) var productsview = myabstract.extend({...}) 

then create view, handling wrapper (tabs).

example: http://jsfiddle.net/dc7rn/