Backbone.js 木偶表tr rowspan渲染

如何使用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',
        },
    ]
},

---

我最近才开始学木偶。我不知道如何处理这个问题。有人能帮忙吗？谢谢

我不是专家，但在序列化或使用此工具渲染时，可以输出logs.length的值来确定行跨度

在纯HTML中，类似于：

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

<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>

---

不应该这样做吗？

我不是专家，但是在序列化或使用此渲染时，可以输出logs.length的值来确定行跨度

在纯HTML中，类似于：

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

<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>

---

这不应该吗？

假设您希望每个名称+时间+日志+步骤作为一个项目，而表格作为一个集合：

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);

现在，对于您的模板，我不认为下划线模板（这是主干网和提线木偶使用的）与HAML配合得很好。但仅使用

erb

语法，您的模板将类似于：

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

<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>

假设您希望每个名称+时间+日志+步骤作为一个项目，表格作为一个集合：

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);

现在，对于您的模板，我不认为下划线模板（这是主干网和提线木偶使用的）与HAML配合得很好。但仅使用

erb

语法，您的模板将类似于：

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

<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>