如何实现动态rowspan

Question

下面的代码是我最近的尝试。已经有许多人：

的Javascript：

... 
    var issueArray = []; 
    _.each(issueGroups, function(i) { 
     var x = { 
     issue: i[0].issue, 
     comment: i[0].comment, 
     count: i.length, 
     new_row: 1 
     }; 
     issueArray.push(x); 
    }); 
    issueArray[0].new_row = 0; 

    var x = { 
     test: t[0].test, 
     issues: issueArray, 
     rowspan: issueArray.length 
    }; 
    finalResult.push(x); 
}); 

return finalResult; 

这里要注意的重要一点是，对于finalResult每个元素有一个数组称为issues，有一个叫new_row部件，其为所有，但为真第一行。

模板：

... 
<tbody> 
    {{#each failuresByTest}} 
    <tr> 
     <td rowspan="{{rowspan}}">{{test}}</td> 
     {{#each issues}} 
     {{#if new_row}} 
      </tr> 
      <tr> 
      <td><a href="https://www.bughost.com/browse/{{issue}}">{{issue}}</a></td> 
      <td>{{comment}}</td> 
      <td>{{count}}</td> 
     {{else}} 
      <td><a href="https://www.bughost.com/browse/{{issue}}">{{issue}}</a></td> 
      <td>{{comment}}</td> 
      <td>{{count}}</td> 
     {{/if}} 
     {{/each}} 
    </tr> 
    {{/each}} 
</tbody> 
... 

我的数据是这样的的finalResult第一要素有3个问题。我希望它看起来像这样：

<tr> 
    <td rowspan="3">Test1</td> 
    <td>123</td> 
    <td>Bug 1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td>456</td> 
    <td>Bug 2</td> 
    <td>21</td> 
    </tr> 
    <tr> 
    <td>654</td> 
    <td>Bug 4</td> 
    <td>3</td> 
    </tr> 

但它结束了看起来像这样：

<tr> 
    <td rowspan="3">Test1</td> 
    <td>123</td> 
    <td>Bug 1</td> 
    <td>2</td> 
    <td> 
    <table> 
     <tr> 
      <td>456</td> 
      <td>Bug 2</td> 
      <td>21</td> 
     </tr> 
     <tr> 
      <td>654</td> 
      <td>Bug 4</td> 
      <td>3</td> 
     </tr> 
     </table> 
    </td> 
    </tr> 

然而流星不喜欢这一点。我得到：

=> Errors prevented startup: 

    While processing files with templating-compiler (for target web.browser): 
    client/templates/runs/run_page.html:128: Unexpected HTML close tag 
    </tr> <tr>  <td><a h... 

这扯到我如此糟糕，我最后决定将行标签错误地解决这个问题，然后将它错误地显示出来。我现在已经编辑了相应的问题，因为这是我真正的问题。

我该如何解决这个问题，并说服流星，其实我知道比它更好！

Answer 1

我用下面的方法解决了Meteor的控制行为。

的Javascript：

var issueArray = []; 
    _.each(issueGroups, function(i) { 
     var x = { 
     issue: i[0].issue, 
     comment: i[0].comment, 
     count: i.length, 
     new_row: 0 
     }; 
     issueArray.push(x); 
    }); 
    issueArray[0].new_row = 1; 
    _.extend(issueArray[0], {rowspan: issueArray.length}); 
    _.extend(issueArray[0], {test: t[0].test}); 

    var x = { 
     issues: issueArray 
    }; 
    finalResult.push(x); 

注意，测试名称和行跨度现在已经搬进了第一个数组元素。我大概可以删除new_row。

模板：

<tbody> 
    {{#each failuresByTest}} 
    {{#each issues}} 
     <tr> 
     {{#if new_row}} 
      <td rowspan="{{rowspan}}">{{test}}</td> 
     {{/if}} 
     <td><a href="https://www.bughost.com/browse/{{issue}}">{{issue}}</a></td> 
     <td>{{comment}}</td> 
     <td>{{count}}</td> 
     </tr> 
    {{/each}} 
    {{/each}} 
</tbody> 

我真的不喜欢把“父数据”中的第一个数组元素。我更喜欢所有的元素都是完全相同的类型/结构，没有添加重复/额外的信息。

Answer 2

您的模板逻辑有瑕疵： 您正试图在<td>中插入新的<tr>。由于<tr>只能包含在表格内，所以浏览器会自动添加一个表格以使html有效。

<tbody> 
    {{#each failuresByTest}} 
    <tr> 
     <td rowspan="{{rowspan}}">{{test}}</td> 
     {{#each issues}} 
     {{#if new_row}} 
      <tr> 
      <td> 

所以根据每个failureBytest应如何渲染，你应该创建一个新的表中的每个故障，或者它里面的细胞上一行inseatd之外创建一个新的行。