2015-07-06 2 views
3

Я строю стол с Backbone.js и Marionette.js. Моя коллекция моделей создает строки в таблице, которые вставляются в <tbody>.Marionette: Как добавить LayoutView в виде строки в таблицу CompositView?

Я хочу прикрепить 1 единственную строку в верхней части таблицы, которая не входит в мою коллекцию. Это предварительно определенный LayoutView.

Обычно я бы просто добавить еще один регион, а потому, что я работаю с таблицей, я не могу добавить дополнительные div «S к tbody как таблица будет выплюнуть из таблицы, как его не <tr> в пределах <tbody> ,

Ниже моя попытка построения этого в моей onShow функции CompositView:

var SetAllTargets = Backbone.Marionette.LayoutView.extend({ 
    template: JST["common/cubes/table/set-all-rows"], 
    tagName: "tr", 
    className: "set-all-targets" 
}); 


App.Table = Marionette.CompositeView.extend({ 

    template: JST["common/targets/layout"], 
    className: "targets", 
    childView: RowTarget, 
    childViewContainer: "tbody", 

    regions: { 
     targetsRegion: ".targets-region" 
    }, 

    onShow: function() { 
     var setAllTargetsRow = new SetAllTargets(); 
     var setAllTargetsRegion = "<tr class='target set-all-targets'></tr>"; 
     this.$el.find("tbody").prepend(setAllTargetsRegion); 
     this.$el.find(".set-all-targets").show(setAllTargetsRow); 
    } 
)}; 

Еще одна попытка была поставить

<tr class='target set-all-targets'> ...child elements here </tr> 

в шаблон и прикрепить view.el в моей onShow функции например:

onShow: function() {  
     var setAllTargetsRow = new SetAllTargets(); 
     this.$el.find("tbody").prepend(setAllTargetsRow.el); 
    } 

Но это приводит только к тому, что html <tr class='target set-all-targets'></tr> помещается в верхнюю часть таблицы, но ни один из дочерних элементов.

ответ

3

Вы можете использовать метод CollectionView.addChild на вашем композит, чтобы вставить что-то прежде, чем ваша коллекция визуализируется:

onBeforeRenderCollection: function() { 
    this.addChild(null, <View>, 0); 
} 

See this fiddle для примера его в действии.

+0

Я закончил тем, что добавил лишний ряд в мой заголовок, но это способ чище. Я обновлю свой проект, как только смогу. Благодаря! – conor909