如何在MustacheJS中实现仅当有数据行时显示表格？

你的核心问题是直接用{{#loop}}包裹整个表格会因为数组的循环特性生成多个表格，而我们需要的是仅当数据行存在时渲染一次完整表格，可以通过以下两种方式实现：

方案一：新增标识字段判断 #

在数据中添加一个hasRows字段，根据loop数组的长度设置为true或false，然后用这个字段作为条件包裹整个表格：

模板代码 #

{{#hasRows}}
<table>
  <TR><TH>First Name</TH><TH>Last Name</TH></TR>
  {{#loop}}
  <TR><TD>{{fname}}</TD><TD>{{lname}}</TD></TR>
  {{/loop}}
</table>
{{/hasRows}}

对应数据 #

{ 
  loop: [{fname:"John", lname:"Smith"},{fname:"Sponge", lname:"Bob"}],
  hasRows: true // 当loop为空时设为false
}

方案二：用函数动态判断 #

在数据中添加一个判断函数，通过函数返回值决定是否渲染表格，无需手动维护标识字段：

模板代码 #

{{#shouldShowTable}}
<table>
  <TR><TH>First Name</TH><TH>Last Name</TH></TR>
  {{#loop}}
  <TR><TD>{{fname}}</TD><TD>{{lname}}</TD></TR>
  {{/loop}}
</table>
{{/shouldShowTable}}

对应数据 #

{ 
  loop: [{fname:"John", lname:"Smith"},{fname:"Sponge", lname:"Bob"}],
  shouldShowTable: function() {
    return this.loop.length > 0;
  }
}

两种方案都能实现需求：当loop数组为空时，整个表格不会被渲染；当数组有数据时，只会渲染一次完整表格并循环生成数据行。

内容的提问来源于stack exchange，提问作者Doug