Представления марионетки не добавляют разрыв строки после каждого элемента

Question

Я пытаюсь создать простой список, используя Collection Collection и ItemView от Marionette.

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() 

Это работает нормально, создает список с тремя элементами и без содержимого (шаблон пуст). Но код html, созданный всем, застрял вместе, без разрывов строк. Например:

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

Есть ли способ получить это вместо этого?

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

jsFiddle

EDIT: Любой тип пространства будет делать. li: inline-block и должны быть расположены друг от друга, чтобы иметь возможность использовать justify на ul.

Answer 1

Хорошо, это предположение, но, возможно, вы можете просто изменить обработчик по умолчанию, связанный с html. Таким образом, ваш код «cv» будет выглядеть так:

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