Question

I’m working on selecting a JavaScript MVC framework to use on a team where the UI group have decided upon Twitter Bootstrap for styling and basic UI components. That means that if we are going to render Bootstrap Tabs I need to be able to render sibling mark-up for the tab-labels and tab-panes respectively. I like Marionette as a higher-level framework than Backbone itself, but not as complex as Ember. However, I’m running into problems trying to build out the mark-up necessary to display tabs ala Bootstrap.

I believe that I need to use a Layout for the “tabs” as a whole with a region for the “labels” and a region for the “panes”, using a CollectionView to render each separately. However, due to the fact that each view needs it’s own HTML element, there is a “div” being placed around my collection mark-up, in between the labels/panes containers and their respective individual items.

I’ve put together a jsFiddle example that illustrates this.

My questions are:

1) is this the correct way to organize the rendering of a collection where you have two or more view-renderings of said collection which need to be siblings in the DOM?

2) if it is, is there a way to have your region element be the root for your collection view rather than an intermediary HTML element?

NOTE:

I did see a possible answer to my first question, but that appears to be for generating a single header for a collection of items.

I also did see a possible answer to part-two of my question, but it seems to imply that you are still generating a HTML elemen.

Answer 1

1) Yes, that’s how I would do it. Reusing the same collection ensure that two collection views remain in sync in case the collection is dynamically modified.

2) The short answer is no. The long answer is that you’d have to override a few methods to achieve this. It’s easy to the CollectionView‘s el to be same the region’s, but then if the view is closed this el will be removed from the DOM, rendering the region unusable.