如何在 underscore.js 模板中使用 if 语句？

【问题标题】：How to use if statements in underscore.js templates?如何在 underscore.js 模板中使用 if 语句？
【发布时间】：2011-11-06 00:36:45
【问题描述】：

我正在使用 underscore.js 模板功能，并做了一个这样的模板：

<script type="text/template" id="gridItem">
    <div class="griditem <%= gridType %> <%= gridSize %>">
        <img src="<%= image %>" />
        <div class="content">
            <span class="subheading"><%= categoryName %></span>
            <% if (date) { %><span class="date"><%= date %></span><% }  %>
            <h2><%= title %></h2>
        </div>
    </div>
</script>

如您所见，我在其中有一个 if 语句，因为我的所有模型都没有 date 参数。然而，这种做法给了我一个错误date is not defined。那么，如何在模板中执行 if 语句？

【问题讨论】：

标签： javascript templates backbone.js underscore.js

【解决方案1】：

这应该可以解决问题：

<% if (typeof(date) !== "undefined") { %>
    <span class="date"><%= date %></span>
<% } %>

请记住，在 underscore.js 模板中，if 和 for 只是包装在 <% %> 标记中的标准 javascript 语法。

【讨论】：

效果很好，刚刚发现 JS switch/case 语句在模板标记中也能很好地工作。
很棒的答案。你能告诉我在使用模板时如何使用交替类吗？像第一个
应该得到类 a 和下一个 b？

@BlackDivine 我知道这有点晚了，但是对于交替样式，您应该使用 :nth-child(even) 和 :nth-child(odd) CSS 选择器，而不是更改您的模板。

它看起来与用于在 jsp 中呈现变量的 java scriptlet 相同

我在最后得到了这一行 {{ } }}，因为我必须更改包装器，它仍然有效。

【解决方案2】：

如果你喜欢更短的 if else 语句，你可以使用这个简写：

<%= typeof(id)!== 'undefined' ?  id : '' %>

这意味着如果id有效则显示id，如果无效则显示空白。

【讨论】：

Conditional operator，得到昵称“三元”，因为它是唯一常见的三元运算符（三操作数）。
请注意，此答案中提出的技术偶尔会出现一个缺点，即您再次陷入了字符串插值的困境，而这些模板应该可以为您解决。截至目前，_.template 在每个已编译代码标记的开头插入一个;。因此，它可以处理语句之间的标签中断，但不能处理表达式内部的标签。将;if(a){b;}else{c;} 与;a?b;:c; 进行比较。

【解决方案3】：

根据情况和/或您的风格，您可能还想在<% %> 标签中使用print，因为它允许直接输出。喜欢：

<% if (typeof(id) != "undefined") {
     print(id);
}
else {
    print('new Model');
} %>

对于带有一些连接的原始 sn-p：

<% if (typeof(date) != "undefined") {
    print('<span class="date">' + date + '</span>');
} %>

【讨论】：

【解决方案4】：

下面是 underscore.js 中的一个简单 if/else 检查，如果您需要包含一个空检查。

<div class="editor-label">
    <label>First Name : </label>
</div>
<div class="editor-field">
    <% if(FirstName == null) { %>
        <input type="text" id="txtFirstName" value="" />
    <% } else { %>
        <input type="text" id="txtFirstName" value="<%=FirstName%>" />
    <% } %>
</div>

【讨论】：

null 和 undefined 不一样，还是会报错
在这种情况下没关系，因为他使用 == 检查值，这将转换值。由于类型转换，以下语句是正确的：null == undefined - 不认可，只是说。
我觉得还是用_.isEmpty()比较好

【解决方案5】：

回应上面的 blackdivine（关于如何对结果进行条带化），您可能已经找到了答案（如果是这样，您不分享感到羞耻！），但最简单的方法是使用模运算符。比如说，你正在一个 for 循环中工作：

<% for(i=0, l=myLongArray.length; i<l; ++i) { %>
...
<% } %>

在该循环中，只需检查索引的值（在我的情况下为 i）：

<% if(i%2) { %>class="odd"<% } else { %>class="even" <% }%>

这样做将检查我的索引的剩余部分除以 2（每个索引行在 1 和 0 之间切换）。

【讨论】：

【解决方案6】：

你可以试试_.isUndefined

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>

【讨论】：

注意“日期未定义”和“日期未定义”之间的区别。他们应该将该错误称为“不存在名称为‘日期’的变量或全局属性。”如果date 根本不存在，您提出的代码仍会引发异常。在这种情况下，您确实需要typeof，尽管在我们对模板数据进行鸭式输入时使用命名变量会更好。

【解决方案7】：

来自here：

“您还可以通过该对象引用数据对象的属性，而不是将它们作为变量进行访问。”这意味着对于 OP 的情况，这将起作用（与其他可能的解决方案相比，变化要小得多）：

<% if (obj.date) { %><span class="date"><%= date %></span><% }  %>

【讨论】：

【解决方案8】：

要检查空值，您可以使用来自official documentation 的_.isNull

isNull_.isNull(object)

如果 object 的值为 null，则返回 true。

_.isNull(null);
=> true
_.isNull(undefined);
=> false

【讨论】：