5

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.

1 Answer 1

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.

7
  • Thanks!, So this seems to be a case where it's better to put the HTML assembly in the template. Aug 27, 2012 at 15:21
  • Actually, I ended up having to subclass Marionette.CompositeView and override a number of methods see my jsFiddle. I'm assuming there is a more elegant way to implement this... Aug 27, 2012 at 22:42
  • 1
    Why not just reuse the same collection twice in two different view? I tend to use Layout and CollectionView instead of CompositeView - A bit more declaration but fewer overrides. Aug 27, 2012 at 23:24
  • That was indeed the route I started to take, but I ran into issues with the fact that an element has to be inserted for each view. If you look at my original jsFiddle, you'll see how I structured things for the approach you suggest. If there's a better way I could have done this leveraging Marionette's provided views, definitely let me know. I much prefer reuse over sub-classing. Aug 28, 2012 at 16:23
  • 1
    I updated the jsFiddle moving the showing of regions to the layout's onRender, which is how I show all my layout regions. Aug 28, 2012 at 18:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.