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

时间:2011-08-29 13:04:15

标签: javascript templates backbone.js underscore.js

我正在使用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。那么,如何在模板中进行语句?

8 个答案:

答案 0 :(得分:431)

这应该可以解决问题:

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

请记住,在underscore.js模板中iffor只是包含在<% %>标记中的标准javascript语法。

答案 1 :(得分:78)

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

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

表示如果有效则显示id,如果不是则表示空白。

答案 2 :(得分:20)

根据情况和风格,您可能还想在<% %>标记中使用print,因为它允许直接输出。像:

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

对于带有一些连接的原始代码段:

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

答案 3 :(得分:9)

如果你需要包含空检查,这是一个简单的if / else检查underscore.js。

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

答案 4 :(得分:5)

对上面的blackdivine做出回应(关于如何对一个人的结果进行条纹化),你可能已经找到了答案(如果是这样的话,你可能因为不共享而感到羞耻!),但最简单的方法是使用模数运算符。比方说,例如,你在for循环中工作:

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

在该循环中,只需检查索引的值(在我的情况下为i):

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

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

答案 5 :(得分:3)

您可以尝试_.isUndefined

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

答案 6 :(得分:0)

来自here

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

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

答案 7 :(得分:0)

要检查空值,您可以使用official documentation

中的_.isNull
isNull_.isNull(object)

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

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