Вводят HTML между марионетка ItemViews внутри CollectionView

Question

У меня есть представление коллекции (MyCollView ниже), и хочет (условно) впрыснуть HTML между различным itemViews (MyItemView ниже) без изменения MyItemView. Я знаю, что есть множество различных опций, которые CollectionViews может иметь, но ничего не видел для этого конкретного использования.

Подробнее: Я хочу ввести тег <br> после каждого MyItemView в MyCollView, если экземпляр MyItemView не является последним в коллекции. Вот мой желаемый результат для того, что моя точка зрения коллекция сделает:

<div>name1</div> 
<br> 
<div>name2</div> 
<br> 
<div>name3</div> 

Вот мой код:

MyItemView = Backbone.Marionette.ItemView.extend({ 
    template: _.template('<div><%= name %></div>') 
}); 

MyCollView = Backbone.Marionette.CollectionView.extend({ 
    childView: MyItemView 
    //ideally, I would like to provide some other property to accomplish my goal here, like... 
    //separatorHtml: '<br>' 
}); 

var myColl = new Backbone.Collection([ 
    {name: 'name1'}, 
    {name: 'name2'}, 
    {name: 'name3'} 
]); 

thisCollView = new MyCollView({ 
    collection: myColl 
}); 

thisCollView.render(); 

Мои мысли сейчас продлить MyItemView в MyModifiedItemView и поставить в этом необязательном <br> тег, но Я не знал, есть ли еще способ «марионетки-у». Есть предположения? Благодаря!

Answer 1

Как правило, вы можете использовать события просмотра Marionette, чтобы связать элемент html с шаблоном этого представления. Это нормально, если элемент, который вы хотите подключить, будет существовать внутри, что вид el. Ваш случай немного сложный, потому что вы хотите добавить <br/>за пределами каждый элемент. (Если вы хотите точно знать, почему это проблема, спросите меня в комментариях). Вместо этого, что мы будем делать, это слушать в родительском CollectionView, когда будет добавлен ребенок.

Вам также нужен элемент <br>, который вы добавляете для условного. Мы можем воспользоваться внутренним свойством представлений Marionette, view._index, а также ссылкой на коллекцию. Магистральная добавка к каждой модели, чтобы проверить, является ли рендеринг текущего представления элементов последним.

Собираем все вместе все, что вам нужно сделать, это добавить это свойство в MyCollView:

onAddChild : function (childview) { 
    if (this.collection.length !== childview._index + 1) 
     childview.$el.after('<br/>'); 
} 

, который проверяет, является ли мнение ребенка, который только что был добавлен последний вид в коллекции, или нет.