Question

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

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}}。

如果没有真正看到相关模板，很难说清楚。

更新

好的，你发了一些例子，所以我现在可以说更多。首先，你桌子的其他部分在哪里？为什么不在模板中？原始数据会附加到现有表格中，但我认为这只会执行一次，因为否则您不会在表格中附加“No Rows Were Found”消息，但您将替换现有内容。

首先，在这种特殊情况下，您可以使用快速黑客攻击并使用：

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

Answer 2

一个选项是将数组包装在一个匿名对象中，这样就不会为数组中的每个项调用模板，那么你可以使用条件语句（{{if}}）来检查长度和使用{{each}}遍历这些项目。

所以，传递给它：$("#Template").tmpl({ items: results }).appendTo("#tableid")

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

2 个答案:

更新