動的行スパンを実装する方法

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の各要素の配列はすべてが、ために真であるnew_rowと呼ばれる部材を有するissuesと呼ばれるがあるということです他の多くのがありました最初の行

テンプレート：

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

注テスト名とROWSPANは今最初の配列要素に移動していること。おそらく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外に新しい行を作成します。