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

Joe*_*oel 237 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>
Run Code Online (Sandbox Code Playgroud)

正如你所看到的,我在那里有一个if语句,因为我的所有模型都没有date参数.然而,这种方式给我一个错误date is not defined.那么,如何在模板中进行语句?

sol*_*oth 440

这应该做的伎俩:

<% if (typeof(date) !== "undefined") { %>
    <span class="date"><%= date %></span>
<% } %>
Run Code Online (Sandbox Code Playgroud)

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

  • @BlackDivine我知道它有点晚了,但对于交替的样式你应该使用``:nth-​​child(偶数)``和``:nth-​​child(odd)``CSS选择器,不要改变你的模板. (4认同)
  • 效果很好,刚刚发现JS switch/case语句在模板标记中也能很好地工作. (2认同)

Ton*_*shi 78

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

<%= typeof(id)!== 'undefined' ?  id : '' %>
Run Code Online (Sandbox Code Playgroud)

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

  • 三元运算符 (6认同)
  • [条件运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator),它获得绰号"三元",因为它是唯一常见的三元运算符(三个操作数) ). (4认同)

Sun*_*Red 21

根据情况和风格,您可能还希望在标签内使用打印<% %>,因为它允许直接输出.喜欢:

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

对于带有一些串联的原始代码段:

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


Yas*_*ser 9

如果需要包含空检查,则在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>
Run Code Online (Sandbox Code Playgroud)

  • 在这种情况下,它无关紧要,因为他使用==检查值,这将转换该值.由于类型转换,以下语句为真:null == undefined - 不赞同,只是说. (4认同)

Sno*_*key 5

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

<% for(i=0, l=myLongArray.length; i<l; ++i) { %>
...
<% } %>
Run Code Online (Sandbox Code Playgroud)

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

<% if(i%2) { %>class="odd"<% } else { %>class="even" <% }%>
Run Code Online (Sandbox Code Playgroud)

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