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

这方面跟踪我如此糟糕，以至于我最终错误地将行标签修复此问题然后显示错误。我现在已经相应地编辑了这个问题，因为这是我真正的问题。

我如何解决这个问题并说服Meteor实际上我知道的比它更好！

Answer 1

您的模板逻辑存在缺陷：您正尝试在<tr>内插入新的<td>。由于<tr>只能包含在表中，因此浏览器会自动在其周围添加一个表，以便html有效。

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

因此，根据每个failureBytest的呈现方式，您应该为每个失败创建一个新表，或者在其内部单元格内部创建一个新行。

Answer 2

我通过以下方式解决了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>

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

如何实现动态行展

2 个答案: