使用 Jquery 模板处理无结果行的更好方法

Question

我正在使用 JQuery 模板，并且希望生成一行，如果发送到模板的数组中没有结果，则显示“未找到结果”。我现在处理它的方法是有两个模板 - 一个输出行，另一个输出不存在行的实例，但这对我来说似乎很脏。有更好的方法来处理这种情况吗？

if(results.length == 0)
   $( "#NoRowsTemplate" ).tmpl( results ).appendTo("#tableid")
else
   $( "#HasRowsTemplate" ).tmpl( new Array(1)).appendTo("#tableid")

以下是包含行的模板示例：

<script id="HasRowsTemplate" type="text/x-jquery-tmpl">
<tr>
<td>${name}</td>
</tr>
</script>

以下是不包含行的模板示例：

<script id="NoRowsTemplate" type="text/x-jquery-tmpl">
<tr>
<td>No Rows Were Found</td>
</tr>
</script>

Answer 1

一种选择是将数组包装在匿名对象中，这样就不会为数组中的每个项目调用模板，然后您可以使用条件语句 ( {{if}} ) 来检查长度并使用 {{each}} 循环遍历项目。

因此，请像这样传递它： $("#Template").tmpl({ items: results }).appendTo("#tableid")

Answer 2

您可以使用 {{if}} 和 {{else}}。

如果没有实际看到相关模板，很难透露更多信息。

更新：

好的，您发布了一些示例，所以我现在可以说更多。首先，桌子的其余部分在哪里？为什么模板中没有？原始数据被附加到现有表中，但我假设这只执行一次，因为否则您不会将“未找到行”消息附加到表中，但您会替换现有内容。

首先，在这种特殊情况下，您可能会使用快速破解并仅使用：

if (results.length === 0) {
    results = ["No Rows Were Found"];
}
$( "#NoRowsTemplate" ).tmpl( results ).appendTo("#tableid");

它应该只执行您想要的操作，但我不会推荐此方法，因为它会更改数组并可能会导致代码其他部分出现一些问题。我建议这样做：

$( "#newTemplate" ).tmpl({ results: results }).appendTo("#tableid");

使用这个新模板：

<script id="newemplate" type="text/x-jquery-tmpl">
  {{if results.length}}
    {{each results}}
      <tr>
        <td>${value}</td>
      </tr>
    {{/each}}
  {{else}}
    <tr>
      <td>No Rows Were Found</td>
    </tr>
  {{/if}}
</script>

并且我还将表 HTML 的其余部分添加到该模板的开头和结尾。