Начальная проблема

У меня есть CompositeView (таблица), для которого каждая модель в коллекции представлена в виде двух строк таблицы, с шаблоном, как:

<tr class="row-parent">
    <td>parent info here</td>
</tr>
<tr class="row-child">
    <td>child info here</td>
</tr>

С ItemView, как это:

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl
});

Несмотря на то, что они называются «родитель» и «ребенок», они на самом деле являются членами одной модели. Если я не укажу tagName, Backbone обернет каждое представление в<div> который является недействительным HTML, а также нарушает макет.

Первая попытка решения

Итак, я решил, почему бы не удалить внешнюю<tr> и добавьте их в Backbone. Поэтому я обновил свой шаблон так:

    <td>parent info here</td>
</tr>
<tr class="row-child">
    <td>child info here</td>

И обновил вид:

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl,
    tagName: 'tr',
    className: 'row-parent'
});

Я надеялся, что внешний тег соединится с фрагментами внутреннего тега, но Марионетте это не понравилось. Это только показало ребенка-строки. Так что я не уверен, куда идти отсюда. Я рассматриваю две стратегии, но пока не вдавался в подробности.

Движение вперед: план А

Переопределите любую часть Backbone, создающую дополнительный div, чтобы не создавать ее, или переопределите часть Marionette, которая добавляет представление, чтобы удалить div непосредственно перед добавлением.

Движение вперед: план Б

Создайте новый тип представления, называемый CompositeMultiView, который, естественно, будет расширяться за пределы CompositeView и позволит вам указать второй ItemView или, может быть, просто массив представлений, каждый из которых будет отображаться для каждой модели. Этот план кажется намного больше работы, но менее взломан.

Есть ли у кого-нибудь лучшие предложения, обходные пути или конкретные указания относительно того, как мне поступить в реализации любого из двух вышеуказанных планов?

Вот макет того, как должна выглядеть таблица: