кукольный стол тр RowSpan визуализации

Question

Как я могу использовать ItemView или CollectionView для визуализации HTML, как показано ниже:

%table 
     %tr 
     %td{:rowspan=>"3"} Name1 
     %td{:rowspan=>"3"} Time1 
     %td Step1 
     %tr 
     %td Step2 
     %tr 
     %td Step3 
     %tr 
     %td{:rowspan=>"2"} Name2 
     %td{:rowspan=>"2"} Time2 
     %td Step4 
     %tr 
     %td Step5 

Мой JSON как это:

{ 
    Name: 'Name1', 
    Time: 'Time1', 
    Log: 
    [ 
     { 
      Step: 'Step1', 
     }, 
     { 
      Step: 'Step2', 
     }, 
     { 
      Step: 'Step3', 
     }, 
    ] 
}, 
{ 
    Name: 'Name2', 
    Time: 'Time2', 
    Log: 
    [ 
     { 
      Step: 'Step4', 
     }, 
     { 
      Step: 'Step5', 
     }, 
    ] 
}, 

Я только начинаю изучать марионетку в последнее время. Я не уверен, как справиться с этой проблемой. Может ли кто-нибудь помочь? Благодаря!

Answer 1

Я не эксперт, но при сериализации или при использовании этого для рендеринга вы можете вывести значение logs.length, чтобы определить rowspan.

В простом HTML, что-то вроде:

<table> 
<tr> 
<td rowspan=<%= logs.length %>"><%= name %></td> 
<td rowspan=<%= logs.length %>"><%= name %></td> 
<etc> 
</tr> 
</table> 

Не должен работать?

Answer 2

Предполагая, что вы хотите, каждое имя + время + журнал + ступенчатую вещь как элемент и таблицы в виде коллекции:

var ItemView = Marionette.ItemView.extend({ 
    template: '#foo', 
    tagName: 'tr' 
}); 

var CollectionView = Marionette.CollectionView.extend({ 
    itemView: Item, 
    tagName: 'table' 
}); 

var data = []; // your JSON 
var collection = new Backbone.Collection(data); 
var collectionView = new CollectionView({ collection: collection }); 

// container = document.body or whatever 
container.append(collectionView.render().el); 

Теперь для шаблона, я не верю подчеркнуть шаблоны (что Backbone и поэтому Marionette использует) хорошо играет с HAML. Но используя только синтаксис erb, ваш шаблон будет примерно таким:

<script type="text/template" id="foo"> 

<!-- format however you want --> 

<td><%- Name %></td> 
<td><%- Time %></td> 
<td> 
    <ul>   
    <% _.each(Log, function(li){ %> 
     <li><%- li.Step %></li> 
    <% }); %> 
    </ul>  
</td> 

</script>