Tag <b:loop>
berfungsi untuk melaksanakan iterasi data berupa koleksi. Tag ini memerlukan setidaknya dua buah atribut yakni var
untuk menamai variabel dan values
untuk menampung keseluruhan data.
<ul> <b:loop values='["foo", "bar", "baz", "qux"]' var='v'> <li><data:v/></li> </b:loop> </ul>
Hasil keluaran nantinya akan menjadi ibarat ini:
<ul> <li>foo</li> <li>bar</li> <li>baz</li> <li>qux</li> </ul>
Beberapa atribut opsional ibarat index
dan reverse
juga sanggup digunakan. Atribut index
berfungsi untuk menamai variabel yang nantinya sanggup kita gunakan untuk menampilkan posisi data dimulai dari indeks 0
.
<ul> <b:loop values='["foo", "bar", "baz", "qux"]' var='v' index='k'> <li><b:eval expr='data:k + 1'/>. <data:v/></li> </b:loop> </ul>
Hasil keluaran nantinya akan menjadi ibarat ini:
<ul> <li>1. foo</li> <li>2. bar</li> <li>3. baz</li> <li>4. qux</li> </ul>
Atribut reverse
berfungsi untuk membalik koleksi data tanpa mengubah urutan indeks iterasi.
<ul> <b:loop values='["foo", "bar", "baz", "qux"]' var='v' index='k' reverse='true'> <li><b:eval expr='data:k + 1'/>. <data:v/></li> </b:loop> </ul>
Hasil keluaran nantinya akan menjadi ibarat ini:
<ul> <li>1. qux</li> <li>2. baz</li> <li>3. bar</li> <li>4. foo</li> </ul>
Navigasi Otomatis
Kalau kau cukup percaya diri, kau sanggup memakai fitur ini untuk menciptakan deret navigasi atau tautan membuatkan otomatis:
<b:with var='navigation' value='[{ title: "Home", url: data:blog.homepageUrl }, { title: "About", url: path(data:blog.url, "p/about.html") }, { title: "Contact", url: path(data:blog.url, "p/cotact.html") }, { title: "Search", url: path(data:blog.url, "search") }, { title: "Example", url: "//example.com" }]'> <nav> <ul> <b:loop values='data:navigation' var='v'> <li> <b:class cond='data:blog.url == data:v.url' name='active'/> <a expr:href='data:v.url'><data:v.title/></a> </li> </b:loop> </ul> </nav> </b:with>
Hasil keluaran nantinya akan menjadi ibarat ini:
<nav> <ul> <li class='active'> <a href='http://www.dte.web.id/'>Home</a> </li> <li> <a href='http://www.dte.web.id/p/about.html'>About</a> </li> <li> <a href='http://www.dte.web.id/p/cotact.html'>Contact</a> </li> <li> <a href='http://www.dte.web.id/search'>Search</a> </li> <li> <a href='http://example.com'>Example</a> </li> </ul> </nav>
Kelas active
akan ditambahkan secara otomatis pada item navigasi saat URL pada address bar sama dengan URL pada tautan di dalam item navigasi terkait.