Bisakah kumis mengulang array tingkat atas?

109

Objek saya terlihat seperti ini:

['foo','bar','baz']

Dan saya ingin menggunakan template kumis untuk menghasilkan sesuatu seperti ini:

"<ul><li>foo</li><li>bar</li><li>baz</li></ul>"

Tapi bagaimana caranya? Apakah saya benar-benar harus mengubahnya menjadi sesuatu seperti ini dulu?

{list:['foo','bar','baz']}
Greim
sumber

Jawaban:

169

Anda bisa melakukannya seperti ini ...

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>', ['foo','bar','baz']);

Ini juga berfungsi untuk hal-hal seperti ini ...

var obj = [{name: 'foo'}, {name: 'bar'}];
var tmp = '<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>';
Mustache.render(tmp, obj);
Dan Jordan
sumber
2
sebenarnya templatnya lebih dulu: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver
Bagaimana cara mendapatkan, misalnya, elemen ke-2 dari array? Saya mencoba melakukan {{.1}} dengan mustache.js dan tidak berhasil.
thouliha
NM, saya menemukannya: Anda bisa mengabaikan titik-titiknya: jadi {{1}} atau jika Anda ingin melakukan pemeriksaan logis, maka {{# 1}} terserah {{/ 1}}
thouliha
8
Apakah fitur-fitur ini didokumentasikan di suatu tempat? Saya tidak melihat {{.}},, {{1}}atau yang serupa di kumis (5).
Daniel Lubarov
Catatan: array tingkat atas tidak didukung oleh Hogan: github.com/twitter/hogan.js/issues/74 . Gunakan solusi dengan properti: stackoverflow.com/a/8360440/470117
mems
115

Saya memiliki masalah yang sama pagi ini dan setelah sedikit percobaan saya menemukan Anda dapat menggunakan {{.}} Untuk merujuk ke elemen saat ini dari sebuah array:

<ul>
  {{#yourList}}
  <li>{{.}}</li>
  {{/yourList}}
</ul>
Andy Hull
sumber
1
Dari mana asal nama variabel #yourList? dapatkah Anda menunjukkan contoh javascript dari rendering yang sebenarnya?
iwein
3
Anda bahkan tidak perlu menggunakan "DaftarAnda", Anda dapat menggunakan "." di sini juga: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver
JavaScriptnya adalah Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
Dan Jordan
1
Perhatikan, lakukan ini hanya jika Anda menginginkan templat yang tidak terlalu mudah dibaca. Jawaban yang diterima, meskipun tidak "wajib" adalah solusi yang lebih mudah dibaca.
timoxley
7
Adakah yang tahu mengapa informasi ini tidak ada dalam dokumentasi? mustache.github.io/mustache.5.html
Josh
5

Berdasarkan jawaban @ danjordan, ini akan melakukan apa yang Anda inginkan:

Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);

kembali:

<ul><li>foo</li><li>bar</li><li>baz</li></ul>
Kai Carver
sumber
Ia bekerja hanya untuk array bukan untuk objek, tidak mungkin untuk {a:'foo',b:'bar',c:'baz'}... Bagaimana melakukan referensi anonim saat iterationg atas objek?
Peter Krauss
1

Berikut adalah contoh untuk merender array multi-dimensi dalam sebuah template:

Contoh 1

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : ['foo', 'bar'], multiple_2 : ['hello', 'world']};
var template = '<div>{{test}}</div><ul>{{#multiple}}<li>{{.}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{.}}</li>{{/multiple_2}}</ul>';

var output = Mustache.render(template, view);

console.log(output);

Contoh 2

'use strict';

var Mustache = require('mustache');

var view = {test: 'div content', multiple : [{name: 'foo', gender: 'male'}, {name: 'bar', gender: 'female'}], multiple_2 : [{text: 'Hello', append: '**', prepend: '**'}, {text: 'World', append: '**', prepend: '**'}]};
var template = '<div>{{test}}</div><ul>{{#multiple}}<li>Hello my name is {{name}}. And I am {{gender}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{prepend}}_{{text}}_{{append}}</li>{{/multiple_2}}</ul>';

var output = Mustache.render(template, view);

console.log(output);

Untuk uji coba, simpan contoh di atas dalam file bernama 'test.js', jalankan perintah berikut di baris perintah

nodejs test.js
Bhupender Keswani
sumber
-1

Saya tidak berpikir kumis bisa melakukan ini! (secara mengejutkan) Anda dapat mengulang daftar objek, lalu mengakses atribut dari setiap objek, tetapi Anda tidak dapat mengulang daftar nilai sederhana!

Jadi, Anda harus mengubah daftar Anda menjadi:

[ {"value":"foo"},{"value":"bar"},{"value":"baz"} ] 

dan template Anda akan menjadi:

<ul>
  {{#the_list}}
  <li>{{value}}</li>
  {{/the_list}}
</ul>

Bagi saya, ini sepertinya masalah yang parah dengan Mustache - sistem template apa pun harus dapat mengulang daftar nilai sederhana!

Nick Perkins
sumber
4
Anda hanya perlu menggunakan {{.}}. Lihat jawaban saya di bawah.
Andy Hull
2
Suara negatif itu menyesatkan. Jawaban ini benar karena {{.}} Bukan bagian dari standar mustache, meskipun didukung oleh beberapa implementasi. Tidak ada cara portabel untuk melakukan ini.
Yefu
yang satu ini benar, dan sangat berguna untuk rendering multidimensi. Silakan temukan contoh saya seperti di bawah ini
Bhupender Keswani