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

IT技术 javascript templates backbone.js underscore.js
2021-02-24 03:49:36

我正在使用 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 is not defined。那么，模板中的 if 语句该怎么做呢？

6个回答

这应该可以解决问题：

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

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

它看起来与用于在 jsp 中呈现变量的 java scriptlets 相同
2021-04-18 03:49:36
@BlackDivine我知道这是有点晚了，但对于交的风格，你应该使用:nth-child(even)和:nth-child(odd)CSS选择器，不会改变你的模板。
2021-04-21 03:49:36
很棒的答案。您能否还告诉我在使用模板时如何使用交替类？像第一个 <li> 应该得到类 a 和下一个 b？
2021-04-24 03:49:36
效果很好，刚刚发现 JS switch/case 语句在模板标记中也能很好地工作。
2021-04-27 03:49:36
我在 {{ } }} 结尾处得到了这一行，因为我不得不更改 <% %> 包装器并且它仍然有效。
2021-05-13 03:49:36

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

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

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

条件运算符，它的昵称是“三元”，因为它是唯一常见的三元运算符（三个操作数）。
2021-04-24 03:49:36
请注意，此答案中提出的技术的一个偶然缺点是，您不得不重新进行字符串插值，而哪些模板应该为您解决。截至目前，在每个已编译代码标记的开头_.template插入一个;。因此，它可以处理语句之间的标记中断，但不能处理表达式内部的标记。比较;if(a){b;}else{c;}到;a?b;:c;。
2021-05-06 03:49:36

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

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

对于带有一些连接的原始片段：

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

这是 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>
我认为最好使用 _.isEmpty()
2021-04-19 03:49:36
null 与 undefined 不同，它仍然会产生错误
2021-05-11 03:49:36
在这种情况下，这无关紧要，因为他使用 == 检查值，这将转换该值。由于类型转换，以下陈述是正确的： null == undefined - 不支持这一点，只是说。
2021-05-14 03:49:36

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

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

在该循环中，只需检查索引的值（就我而言）：

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

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

其它你可能感兴趣的问题
上一篇如何获取字符串的第一个字符？ 下一篇如何监听“props”变化