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.

Community
  • 1
  • 1
Heuristocrat
  • 163
  • 1
  • 6

1 Answers1

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.

Tony Abou-Assaleh
  • 3,000
  • 2
  • 25
  • 37
  • Thanks!, So this seems to be a case where it's better to put the HTML assembly in the template. – Heuristocrat Aug 27 '12 at 15:21
  • Actually, I ended up having to subclass Marionette.CompositeView and override a number of methods [see my jsFiddle](http://jsfiddle.net/heuristocrat/7aT9g/2/). I'm assuming there is a more elegant way to implement this... – Heuristocrat Aug 27 '12 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. – Tony Abou-Assaleh Aug 27 '12 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](http://jsfiddle.net/heuristocrat/2BnT5/2/), 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. – Heuristocrat Aug 28 '12 at 16:23
  • 1
    I updated the [jsFiddle](http://jsfiddle.net/2BnT5/3/) moving the showing of regions to the layout's `onRender`, which is how I show all my layout regions. – Tony Abou-Assaleh Aug 28 '12 at 18:29
  • Yes, but that does not address the issue. There is a style rule for '.tabbable > ul.tab-labels > li' which should make the tab-labels yellow if the mark-up conforms to the required mark-up for Twitter's Bootstrap tabs to render/function correctly. The issue is the extra `
    ` that is inserted for each region which adds a DOM element in between the `
      ` and the `
    • ` elements.
     – Heuristocrat Aug 28 '12 at 22:14
  • [Here is small update](http://jsfiddle.net/2BnT5/5/). Sorry I missunderstood the problem earlier. You can't get rid of the element created by the View, but you can make it whatever you want it to be. Does it look like what you're looking for? – Tony Abou-Assaleh Aug 28 '12 at 23:55