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

Question

我正在使用 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 语句，因为我的所有模型都没有日期参数。然而，这样做会给我一个错误日期未定义。那么，如何在模板中执行 if 语句呢？

Answer 1

这应该可以解决问题：

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

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

Answer 2

如果您喜欢更短的 if else 语句，您可以使用以下简写：

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

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

Answer 3

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

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

对于带有一些串联的原始片段：

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

Answer 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>

Answer 5

响应上面的 blackdivine （关于如何条纹结果），您可能已经找到了答案（如果是这样，那么为您不分享而感到羞耻！），但最简单的方法是使用模运算符。举例来说，您正在 for 循环中工作：

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

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

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

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

Answer 6

您可以尝试 _.isUndefine

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

Answer 7

来自此处：

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

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

Answer 8

要检查 null 值，您可以使用 官方文档 中的 _.isNull

isNull_.isNull(object)

返回 true如果对象的值为空。

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