【问题标题】：mustache.js tr table rows every nth record?mustache.js tr 表每第 n 条记录行？
【发布时间】：2021-11-21 10:12:21
【问题描述】：

我正在寻找比我使用 mustache.js 的代码更好的解决方案该模板正在创建 2 行和 2 列的表，因此我需要在每个奇数项的开头和每个偶数项的末尾插入。我不知道如何让 mustache 做到这一点，我已经求助于在数据中插入额外的属性来实现这一点。

这里是附加到这个问题的 stackOverflows 代码编辑器。我正在使用 mustache 1.00 版

例如我想要的数据是

[  [{name:"one"},{name:"two"},{name:"three"},{name:"four"}],
  [{name:"five"}] ];

但我使用以下方法

[
  [{name:"one",rowstart: true},{name:"two",rowend: true},{name:"three",rowstart: true},{name:"four",rowend: true}],
  [{name:"five",rowstart: true}]
];

我使用的结果模板是...

{{#.}}  
  <section class="sheet padding-10mm php">
    <table class="pagedTable">
    {{#.}}
      {{#rowstart}}
      <tr>
      {{/rowstart}}
       
        <td>{{name}}</td>
      
      {{#rowend}}
      </tr>
      {{/rowend}}
    {{/.}}

    </table>
  </section>
{{/.}}

我想要的模板如下所示...

{{#.}}  
  <section class="sheet padding-10mm php">
    <table class="pagedTable">
  {{#.}}
      {{#if index odd}}
      <tr>
      {{/if}}
       
        <td>{{name}}</td>
      
      {{#if index even}}
      </tr>
      {{/if}}
    {{/.}}

    </table>
  </section>
{{/.}}

我必须更改我的数据，这是有问题的。

我的问题是小胡子可以在正确的时间插入正确的位置吗？如果是这样，我该怎么做？

下面是 SO 代码 sn-p

var desiredData =  [
  [{name:"one"},{name:"two"},{name:"three"},{name:"four"}],
  [{name:"five"}] ];
var data = [
  [{name:"one",rowstart: true},{name:"two",rowend: true},{name:"three",rowstart: true},{name:"four",rowend: true}],
  [{name:"five",rowstart: true}]
];


var template = $('#template').html();

$('body.letter').append(Mustache.to_html(template,data));

@page { margin: 0 }
body { 
    margin: 0;
    font-family: Arial, sans-serif, Helvetica;
}
.sheet {
  margin: 0mm auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
    /* border: 1px solid black; */
}

/** Paper sizes **/
body.A3           .sheet { width: 297mm; height: 419mm }
body.A3.landscape .sheet { width: 420mm; height: 296mm }
body.A4           .sheet { width: 210mm; height: 296mm }
body.A4.landscape .sheet { width: 297mm; height: 209mm }
body.A5           .sheet { width: 148mm; height: 209mm }
body.A5.landscape .sheet { width: 210mm; height: 147mm }
body.letter       .sheet { width: 216mm; height: 279mm }
body.letter.landscape       .sheet { width: 279mm; height: 216mm }

/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0;
    font-size: 13px; }
  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
           body.A3.landscape { width: 420mm }
  body.A3, body.A4.landscape { width: 297mm }
  body.A4, body.A5.landscape { width: 210mm }
  body.A5                    { width: 148mm }
    body.letter.lanscape {width: 279mm }
}
.pagedTable {
    border-spacing: 4mm;
    font-size: 13px;
}
.pagedTable td {
    width: 90mm;
    border: 1px solid black;
    vertical-align: top;
    height: 123mm;
}
  
section.php {
    display: block;
}
section.js {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/1.0.0/mustache.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head></head>
<body class="letter">
  
<script id="template" type="text/template">
{{#.}}  
  <section class="sheet padding-10mm php">
    <table class="pagedTable">
    {{#.}}
      {{#rowstart}}
      <tr>
      {{/rowstart}}
       
        <td>{{name}}</td>
      
      {{#rowend}}
      </tr>
      {{/rowend}}
    {{/.}}

    </table>
  </section>
{{/.}}
</script>
  
  </body>
</html>

【问题讨论】：

标签： javascript html jquery templates mustache

【解决方案1】：

似乎 mustache 不能做 if/else 的事情，所以我坚持我所拥有的，但是我已经复制并更改了所需的数据，以便原始数组保持不变。

更新的 SO 代码 sn-p 见下文

var desiredData =  [
  [{name:"one"},{name:"two"},{name:"three"},{name:"four"}],
  [{name:"five"}] ];

var altered = desiredData.map(element => element.map((x,i) => {
 if((i+1)%2 == 0){
   return Object.assign(x, {rowend: true})
 } else {
   return Object.assign(x, {rowstart: true})
 }
})) ;


var template = $('#template').html();

$('body.letter').append(Mustache.to_html(template,altered));

@page { margin: 0 }
body { 
    margin: 0;
    font-family: Arial, sans-serif, Helvetica;
}
.sheet {
  margin: 0mm auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
    /* border: 1px solid black; */
}

/** Paper sizes **/
body.A3           .sheet { width: 297mm; height: 419mm }
body.A3.landscape .sheet { width: 420mm; height: 296mm }
body.A4           .sheet { width: 210mm; height: 296mm }
body.A4.landscape .sheet { width: 297mm; height: 209mm }
body.A5           .sheet { width: 148mm; height: 209mm }
body.A5.landscape .sheet { width: 210mm; height: 147mm }
body.letter       .sheet { width: 216mm; height: 279mm }
body.letter.landscape       .sheet { width: 279mm; height: 216mm }

/** Padding area **/
.sheet.padding-10mm { padding: 10mm }
.sheet.padding-15mm { padding: 15mm }
.sheet.padding-20mm { padding: 20mm }
.sheet.padding-25mm { padding: 25mm }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0;
    font-size: 13px; }
  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
           body.A3.landscape { width: 420mm }
  body.A3, body.A4.landscape { width: 297mm }
  body.A4, body.A5.landscape { width: 210mm }
  body.A5                    { width: 148mm }
    body.letter.lanscape {width: 279mm }
}
.pagedTable {
    border-spacing: 4mm;
    font-size: 13px;
}
.pagedTable td {
    width: 90mm;
    border: 1px solid black;
    vertical-align: top;
    height: 123mm;
}
  
section.php {
    display: block;
}
section.js {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/1.0.0/mustache.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head></head>
<body class="letter">
  
<script id="template" type="text/template">
{{#.}}  
  <section class="sheet padding-10mm php">
    <table class="pagedTable">
    {{#.}}
      {{#rowstart}}
      <tr>
      {{/rowstart}}
       
        <td>{{name}}</td>
      
      {{#rowend}}
      </tr>
      {{/rowend}}
    {{/.}}

    </table>
  </section>
{{/.}}
</script>
  
  </body>
</html>

【讨论】：