如何在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語句，因為我的所有模型都沒有date參數。 但是這種做法讓我錯誤的date is not defined 。 那么，如何在模板中進行語句？

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和0之間切換）。

Answer 6

您可以嘗試_.isUndefined

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

Answer 7

從這里 ：

“您還可以通過該對象引用數據對象的屬性，而不是將它們作為變量訪問。” 這意味着對於OP的情況，這將起作用（與其他可能的解決方案相比，其變化要小得多）：

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

Answer 8

要檢查空值，可以使用官方文檔中的 _.isNull

isNull_.isNull(object)

如果object的值為null，則返回true。

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