underscore.jsテンプレートのifステートメントの使用方法

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ステートメントをどのように実行できますか？

これでうまくいくはずです：

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

underscore.jsテンプレートifでforは、<% %>タグでラップされた単なる標準のJavaScript構文であることを忘れないでください。

if elseステートメントを短くしたい場合は、次の短縮形を使用できます。

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

有効な場合はIDが表示され、有効でない場合は空白が表示されます。

状況やスタイルによっては、直接出力できるため、タグ内でprintを使用する<% %>こともできます。お気に入り：

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

そして、いくつかの連結を含む元のスニペットの場合：

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

nullチェックを含める必要がある場合は、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>

上記のblackdivineに（結果をストライプ化する方法について）回答すると、すでに答えが見つかっている可能性があります（その場合、共有しないのは恥ずかしいです！）が、最も簡単な方法は、モジュラス演算子を使用することです。たとえば、forループで作業しているとします。

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

そのループ内で、インデックスの値をチェックするだけです（私の場合はi）。

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

これを行うと、残りのインデックスが2で除算されます（各インデックス行で1と0の間で切り替わります）。

_.isUndefinedを試すことができます

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

ここから：

「変数としてアクセスする代わりに、そのオブジェクトを介してデータオブジェクトのプロパティを参照することもできます。」OPの場合、これが機能することを意味します（他の可能なソリューションよりも大幅に小さい変更で）。

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

公式ドキュメント_.isNullから使用できるnull値を確認するには

isNull_.isNull(object)

オブジェクトの値がnullの場合、trueを返します。

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