How can I remove line breaks between each childView when rendering a Marionette CollectionView?

Question

In MarionetteJS, when creating a CollectionView, all the children are automatically separated by line breaks when rendered. I would like the children in a particular CollectionView that I have to be rendered in order without a line break added (effectively replacing the line break with a space).

I've looked through the source code, and am sure that I need to alter one of the functions that is called from the render method of the CollectionView. However, I can't for the life of me figure out what it is that needs to be altered.

To find the function in question, find "Render children views" on this annotated source code page: http://marionettejs.com/annotated-src/backbone.marionette.html If anybody can help me figure out what needs to be altered, I would really appreciate that!

Answer 1

Every view needs to either be handed a DOM element to use as a root or create one itself. You can control what tag an ItemView uses as root with the tagName property. The default is <div> which is a block element and that's why you get linebreaks.

You have a couple of options here, and none of them is editing the Marionette source.

You can either have you view use an inline element (like a <span> ) as a root, which is the option I would prefer.

var ItemView = Backbone.Marionette.ItemView.extend({

  template: '#template',

  tagName: 'span'

});

demo

Or you could use CSS to set the root element of your ItemView to display: inline-block .