Вставка html между элементами Marionette ItemView внутри CollectionView

У меня есть представление коллекции (MyCollView ниже) и я хочу (условно) вставить html между различными элементами itemView (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>, но я не знал, есть ли более "марионеточный" способ сделать это. есть идеи? Спасибо!


collectionview marionette backbone-views
person rsteier    schedule 27.02.2015    source источник
comment
Переопределить attachHtml?   -  person ivarni    schedule 28.02.2015
comment
Удачно найти обходной путь?   -  person seebiscuit    schedule 03.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

person seebiscuit    schedule 01.03.2015
comment
Когда вызывается onAddChild, дочернее представление может быть еще не присоединено к DOM. Таким образом, попытка добавить элементы после корневого элемента представления ничего не дает, если вы используете jQuery, или вы получаете сообщение об ошибке, если используете методы DOM напрямую (например, `childview.el.insertAdjacentHTML(afterEnd, html);`). - person Louis; 06.08.2016