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>

牵线木偶桌tr行程渲染

2 个答案: