jquery - 使用 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}}和 {{else}} .

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

更新:

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

首先，在这种特殊情况下，您可以使用快速技巧并使用:

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 的其余部分添加到该模板的开头和结尾。