Marionette views not adding a line break after each element

Question

I'm trying to create a simple list using Marionette's CollectionView and ItemView.

iv = Marionette.ItemView.extend({
    tagName: "li",
    className: "card",
    template: _.template("empty-template")
});

cv = Marionette.CollectionView.extend({
    tagName: "ul",
    className: "card-list",
    childView: iv
});

collection = new Backbone.Collection([
    { name: "alice" },
    { name: "bob" },
    { name: "carol" }
);

view = new cv({collection: collection});
view.render()

This works just fine, creates the list with three items and no content (the template is empty). But the on html code produced everything is stuck together, with no line breaks. Like this:

<ul class="card-list"><li class="card"></li><li class="card"></li><li class="card"></li></ul>

Is there a way of getting this instead?

<ul class="card-list">
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
</ul>

jsFiddle

EDIT: Any type of space would do. The li are inline-block and need to be spaced to be able to use justify on the ul.

Answer 1

Ok this is a guess, but maybe you can just change the default handler of attaching the html. So your "cv" code will look like this:

cv = Marionette.CollectionView.extend({
    tagName: "ul",
    className: "card-list",
    childView: iv,
    attachBuffer: function(collectionView, buffer) {
        collectionView.$el.append(buffer + '\n');
    },
});