Javascript 如何在 underscore.js 模板中使用 if 语句?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7230470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use if statements in underscore.js templates?
提问by Joel
I'm using the underscore.js templating function and have done a template like this:
我正在使用 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>
As you can see I have an if statement in there because all of my models won't have the date parameter. However this way of doing it gives me an error date is not defined
. So, how can I do if statements within a template?
正如你所看到的,我在那里有一个 if 语句,因为我的所有模型都没有日期参数。然而,这样做的方式给了我一个错误date is not defined
。那么,我该如何做模板中的 if 语句呢?
回答by soldier.moth
This should do the trick:
这应该可以解决问题:
<% if (typeof(date) !== "undefined") { %>
<span class="date"><%= date %></span>
<% } %>
Remember that in underscore.js templates if
and for
are just standard javascript syntax wrapped in <% %>
tags.
请记住,在 underscore.js 模板中if
,for
它只是包含在<% %>
标签中的标准 javascript 语法。
回答by TonyTakeshi
If you prefer shorter if else statement, you can use this shorthand:
如果你更喜欢更短的 if else 语句,你可以使用这个简写:
<%= typeof(id)!== 'undefined' ? id : '' %>
It means display the id if is valid and blank if it wasn't.
这意味着如果有效则显示 id,如果无效则显示为空。
回答by SunnyRed
Depending on the situation and or your style, you might also wanna use printinside your <%
%>
tags, as it allows for direct output. Like:
根据情况和/或您的风格,您可能还想在标签内使用打印<%
%>
,因为它允许直接输出。喜欢:
<% if (typeof(id) != "undefined") {
print(id);
}
else {
print('new Model');
} %>
And for the original snippet with some concatenation:
对于带有一些连接的原始片段:
<% if (typeof(date) != "undefined") {
print('<span class="date">' + date + '</span>');
} %>
回答by Yasser Shaikh
Here is a simple if/else check in underscore.js, if you need to include a null check.
这是 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>
回答by Snowmonkey
Responding to blackdivine above (about how to stripe one's results), you may have already found your answer (if so, shame on you for not sharing!), but the easiest way of doing so is by using the modulus operator. say, for example, you're working in a for loop:
响应上面的 blackdivine(关于如何对结果进行条纹化),您可能已经找到了答案(如果是这样,为您没有分享而感到羞耻!),但最简单的方法是使用模数运算符。比如说,你在一个 for 循环中工作:
<% for(i=0, l=myLongArray.length; i<l; ++i) { %>
...
<% } %>
Within that loop, simply check the value of your index (i, in my case):
在该循环中,只需检查索引的值(我,就我而言):
<% if(i%2) { %>class="odd"<% } else { %>class="even" <% }%>
Doing this will check the remainder of my index divided by two (toggling between 1 and 0 for each index row).
这样做将检查我的索引的其余部分除以 2(为每个索引行在 1 和 0 之间切换)。
回答by Damien
You can try _.isUndefined
你可以试试_.isUndefined
<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>
回答by Anna T
From here:
从这里:
"You can also refer to the properties of the data object via that object, instead of accessing them as variables." Meaning that for OP's case this will work (with a significantly smaller change than other possible solutions):
“您还可以通过该对象引用数据对象的属性,而不是将它们作为变量访问。” 这意味着对于 OP 的情况,这将起作用(与其他可能的解决方案相比,变化要小得多):
<% if (obj.date) { %><span class="date"><%= date %></span><% } %>
回答by Cubiczx
To check for null values you could use _.isNull
from official documentation
要检查您可以_.isNull
从官方文档中使用的空值
isNull_.isNull(object)
Returns true if the value of object is null.
如果 object 的值为 null,则返回 true。
_.isNull(null);
=> true
_.isNull(undefined);
=> false