I'm working on choosing a JavaScript MVC framework for use in a team where a group of user interfaces chose Twitter Bootstrap for styling and basic user interface components. This means that if we are going to make Bootstrap tabs , I should be able to display markup for children for tabs and tabs, respectively. I like Marionette as a higher level structure than Backbone itself, but not as complex as Ember. However, I am having problems trying to build the markup needed to display the ala Bootstrap tabs.
I believe that I need to use the layout for “tabs” in general, with an area for “shortcuts” and a region for “panels”, using CollectionView to render each separately. However, because each view needs its own HTML element, I can place a “div” between my label / panel containers and their respective individual elements around my collection.
I put together a jsFiddle example that illustrates this.
My questions:
1) is this the right way to organize the rendering of a collection where you have two or more visualizations representing this collection, which should be siblings in the DOM?
2) if that is the case, is there a way for your region element to be the root of your collection view, and not an intermediate HTML element?
NOTE.
, .
, , , , HTML.