Bagaimana cara menggunakan pernyataan if dalam underscore.js templates?

239

Saya menggunakan fungsi templating underscore.js dan telah melakukan templat seperti ini: 

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

Seperti yang Anda lihat, saya memiliki pernyataan if di sana karena semua model saya tidak akan memiliki parameter tanggal. Namun cara melakukan ini memberi saya kesalahan date is not defined. Jadi, bagaimana saya bisa melakukannya jika pernyataan di dalam template?

javascript templates backbone.js underscore.js Joel
sumber

Jawaban:

442

Ini harus melakukan trik:

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

Ingat bahwa dalam template underscore.js ifdan forhanya sintaks javascript standar yang dibungkus dengan <% %>tag.

tentara
sumber
2
Bekerja dengan baik, dan baru saja menemukan bahwa pernyataan switch / case JS bekerja dengan baik di markup template juga.
julukan
Jawaban yang luar biasa. Bisakah Anda juga memberi tahu bagaimana saya bisa menggunakan kelas bergantian ketika saya menggunakan template? Seperti pertama <li> harus mendapatkan kelas a dan selanjutnya b?
BlackDivine
4
@ BlackDivine Saya tahu ini agak terlambat, tetapi untuk gaya bergantian Anda harus menggunakan :nth-child(even)dan :nth-child(odd)pemilih CSS, tidak mengubah template Anda.
prayerslayer
ini terlihat sama dengan scriptlets java yang digunakan untuk rendering variabel di jsp
Dungeon Hunter
Saya berakhir dengan baris ini di akhir {{}}}, karena saya harus mengganti pembungkus <%%> dan masih berfungsi.
0v3rth3d4wn
78

Jika Anda lebih suka pernyataan pendek jika lain, Anda dapat menggunakan singkatan ini:

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

Ini berarti menampilkan id jika valid dan kosong jika tidak.

TonyTakeshi
sumber
6
operator ternary
user457015
4
Operator bersyarat , yang mendapat julukan "ternary" karena itu satu-satunya operator ternary yang umum (tiga operan).
Tertarik
1
Perhatikan bahwa kekurangan sesekali dari teknik yang diusulkan dalam jawaban ini adalah bahwa Anda terjebak melakukan interpolasi string lagi, template mana yang seharusnya dipecahkan untuk Anda. Sampai sekarang, _.templatesisipkan ;di awal setiap tag kode yang dikompilasi. Dengan demikian, ia dapat menangani tag yang melanggar antar pernyataan, tetapi tidak di dalam ekspresi. Bandingkan ;if(a){b;}else{c;}dengan ;a?b;:c;.
Tertarik
21

Tergantung pada situasi dan atau gaya Anda, Anda mungkin juga ingin menggunakan cetak di dalam <% %>tag Anda , karena memungkinkan untuk output langsung. Suka:

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

Dan untuk cuplikan asli dengan beberapa rangkaian:

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

Ini adalah check if / else yang sederhana di underscore.js, jika Anda perlu menyertakan cek nol.

<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>
Yasser Shaikh
sumber
1
null tidak sama dengan undefined, masih akan menghasilkan kesalahan
xorinzor
4
Dalam hal ini tidak masalah, karena ia memeriksa nilainya menggunakan ==, yang akan mengonversi nilainya. Karena jenis konversi, pernyataan berikut ini benar: null == undefined - Tidak mendukung itu, hanya mengatakan.
Johannes Lumpe
Saya pikir lebih baik menggunakan_.isEmpty()
Nick Barrett
5

Menanggapi blackdivine di atas (tentang cara melucuti hasil seseorang), Anda mungkin sudah menemukan jawaban Anda (jika demikian, memalukan Anda karena tidak berbagi!), Tetapi cara termudah untuk melakukannya adalah dengan menggunakan operator modulus. katakanlah, misalnya, Anda bekerja dalam for for:

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

Dalam loop itu, cukup periksa nilai indeks Anda (i, dalam kasus saya):

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

Melakukan ini akan memeriksa sisa indeks saya dibagi dua (beralih antara 1 dan 0 untuk setiap baris indeks).

Snowmonkey
sumber
3

Anda dapat mencoba _ .Undefined

<% if (!_.isUndefined(date)) { %><span class="date"><%= date %></span><% } %>
Damien
sumber
Waspadalah perbedaan antara "tanggal tidak ditentukan" dan "tanggal tidak ditentukan". Mereka seharusnya menyebut kesalahan itu "Tidak ada variabel atau properti global ada dengan nama 'tanggal'." Kode yang Anda usulkan masih akan mengeluarkan pengecualian jika datetidak ada sama sekali. Anda benar-benar membutuhkannya typeofdalam kasus ini, meskipun akan lebih baik menggunakan variabel bernama ketika kita sedang mengetik data template.
Tertarik
0

Dari sini :

"Anda juga bisa merujuk ke properti objek data melalui objek itu, alih-alih mengaksesnya sebagai variabel." Artinya untuk kasus OP ini akan berfungsi (dengan perubahan yang jauh lebih kecil daripada solusi lain yang mungkin):

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

Untuk memeriksa nilai nol yang dapat Anda gunakan _.isNulldari dokumentasi resmi

isNull_.isNull(object)

Mengembalikan nilai true jika nilai objek adalah nol.

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