如何實現動態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之外創建一個新的行。