Создать представление элементов сиблинга с помощью CollectionView?

Question

У меня есть приложение, которое backbone.marionette с помощью CollectionView для вывода следующего:

• сНу # основной .widget
  • div.head
  • div.body

Создайте свой профиль:

var LogLocationBodyView = App.ItemView.extend({ 
    tagName: "div", 
    attributes: {class: "body"}, 
    template: "#log-location-body-template" 
}); 

var LogLocationHeadView = App.ItemView.extend({ 
    tagName: "div", 
    attributes: {class: "head"}, 
    template: "#log-location-head-template" 
}); 

А вот CollectionView:

var LogLocationsView = App.CollectionView.extend({ 
    template: "#log-locations-template", 
    attributes: {id: "main", class: "widget"}, 
    itemView: LogLocationHeadView 
}); 

Я, очевидно, получить LogLocationHeadView, чтобы сделать, но я ищу лучший подход к inserAfter() LogLocationBodyView, так что 2 ItemViews являются братьями и сестрами.

Каков наилучший способ снять это? Я пробовал несколько разных подходов. Сначала я попытался использовать onRender() моего ItemView, но быстро понял, что могу только добавить к разметке в представлении. Мне действительно нужно вставитьAfter(), и родительский недоступен, так как внутри onRender мы все еще вставляем до DOM.

var LogLocationHeadView = App.ItemView.extend({ 
    tagName: "div", 
    attributes: {class: "head"}, 
    template: "#log-location-head-template", 
    onRender: function() { 

     // create a new piece of html from a different template 
     var view = new LogLocationBodyView({ 
      model: this.model 
     }); 

     view.render(); 

     $(this.el).append(view.el); 

     var c = $(this.el).children(); 
      console.log(c); // true 

     var p = $(this.el).parents(); 
      console.log(p); //undefined 

    } 

Я также понимаю, что я могу переопределить appendHTML() и renderItem() методы в CollectionViews, но мне нужно еще иметь возможность добавить(). Поэтому мне нужно было бы передать renderType.

Что мне действительно нужно сделать, так это передать массив ItemViews вместе с renderType в renderItem. Затем renderItems может развиваться в appendHTML().

var LogLocationsView = App.CollectionView.extend({ 
    template: "#log-locations-template", 
    attributes: {id: "main", class: "widget"}, 
    itemViews: [{view: LogLocationHeadView, renderType: append}, {view: LogLocationBodyView, renderType: insertAfter}] 
}); 

Прежде чем я попытаюсь это сделать, мне нравится видеть, полностью ли я здесь. Есть лучший способ сделать это?

Answer 1

Это был ответ в течение некоторого времени, начиная здесь: https://github.com/marionettejs/backbone.marionette/issues/36. и здесь: https://github.com/marionettejs/backbone.marionette/issues/35

Теперь это полнофункциональное:

http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

Answer 2

Лучшим и самым чистым способом сделать это было бы иметь родительский вид заголовков и представлений тела, добавив оба эти вида в свой метод render, а затем полагаться на insertAfter. Если вы хотите обработать его из вида, который еще не был вставлен, но будет в конце текущего цикла событий браузера, вы можете отложить вставку представлений в следующий цикл, используя либо метод подчеркивания defer, либо setTimeout (fn, 1).

и так далее. вам не нужно указывать имя тега, если оно равно div, поскольку div является значением по умолчанию для tagName.