用车把迭代时,行距错误

时间:2018-09-06 16:46:59

标签: javascript arrays handlebars.js frontend

我有一个循环,涵盖了通过把手请求的动态数据。

<tr class = "">
             <td class = "fw-900" colspan = "2"> Salary </ td>
             <td class = "fw-900" colspan = "2"> Duties </ td>
             <td class = "fw-900" colspan = "1"> Name </ td>
         </ tr>

{{#each this.peoples}}
             <tr>
                 <td class = "text-uppercase" colspan = "2"> {{this.salary}} </ td>
                 <td class = "text-uppercase" colspan = "2"> duties </ td>
                 <td class = "text-uppercase"> {{this.name}} </ td>
                 <td class = "text-uppercase text-center total" rowspan = "{{../ members.length}}" colspan = "" width = "15%"> {{../ members.length}} </ td>
             </ tr>
{{/ each}}

当它呈现总计时,我想进行一次行跨,但是由于行跨交互也覆盖了该行跨行,因此发生的是它将为每一行呈现一行。

如何正确执行此策略?

1 个答案:

答案 0 :(得分:0)

如果我正确理解了您的问题,我本人就遇到了这个问题。我通过获取每个当前迭代的索引来解决此问题,然后使用一个助手检查索引是否为0-第一次迭代。如果是的话,它将呈现跨行的td。

JS

Handlebars.registerHelper('conditionalHelper', function(lValue, rValue, options) {
  if (lValue == rValue) {
    return options.fn(this);
  }
  return options.inverse(this);
});

模板

{{#each this.peoples as | person personKey|}}
  {{#conditionalHelper personKey 0}}
    <td class = "text-uppercase text-center total" rowspan = "{{../ person.members.length}}" colspan = "" width = "15%"> {{../ person.members.length}} </ td>
  {{/conditionalHelper}}
{{/each}}

有关索引功能的更多信息可以在文档here中找到。