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']}

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

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>

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>

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

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


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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.