web-dev-qa-db-ja.com

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>

ご覧のとおり、私のモデルにはすべてdateパラメーターがないので、そこにifステートメントがあります。しかしこのやり方ではエラーdate is not definedが出ます。それでは、テンプレート内のifステートメントはどうすればよいのでしょうか。

javascripttemplatesbackbone.jsunderscore.js
234
Joel

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

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

Underscore.jsテンプレートのifとforは、<% %>タグで囲まれた標準のJavaScript構文です。

433
soldier.moth

もしif else文より短くしたいのなら、この速記を使うことができます。

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

有効であればIDを表示し、無効であれば空白を表示します。

78
TonyTakeshi

状況やスタイルによっては、直接出力が可能なので、<%%>タグ内で print を使用することもできます。好きです：

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

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

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

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

上記のblackdivineに答えて（自分の結果をどのようにストライプするかについて）、あなたはすでにあなたの答えを見つけたかもしれません（もしそうなら、共有していないことをあなたに恥じてください！）たとえば、forループで作業しているとします。

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

そのループの中で、あなたのインデックスの値をチェックしてください（私の場合はiです）。

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

これを実行すると、私のインデックスの残りの部分を2で割った値がチェックされます（各インデックス行について1と0の間で切り替わります）。

5
Snowmonkey

あなたは試すことができます _。isUndefined

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

から ここ ：

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

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

Null値をチェックするには、 公式ドキュメントの_.isNullを使用できます

isNull_.isNull(object)

Objectの値がnullの場合、trueを返します。

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