วัตถุของฉันมีลักษณะดังนี้:
['foo','bar','baz']
และฉันต้องการใช้เทมเพลตหนวดเพื่อสร้างสิ่งนี้:
"<ul><li>foo</li><li>bar</li><li>baz</li></ul>"
แต่อย่างไร? ฉันต้องเจาะลึกลงไปในสิ่งนี้ก่อนหรือไม่?
{list:['foo','bar','baz']}
วัตถุของฉันมีลักษณะดังนี้:
['foo','bar','baz']
และฉันต้องการใช้เทมเพลตหนวดเพื่อสร้างสิ่งนี้:
"<ul><li>foo</li><li>bar</li><li>baz</li></ul>"
แต่อย่างไร? ฉันต้องเจาะลึกลงไปในสิ่งนี้ก่อนหรือไม่?
{list:['foo','bar','baz']}
คำตอบ:
ทำได้แบบนี้ ...
Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>', ['foo','bar','baz']);
มันยังใช้ได้กับสิ่งต่างๆเช่นนี้ ...
var obj = [{name: 'foo'}, {name: 'bar'}];
var tmp = '<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>';
Mustache.render(tmp, obj);
{{.}}
, {{1}}
หรืออะไรที่คล้ายกันในหนวด (5)
เมื่อเช้านี้ฉันมีปัญหาเดียวกันและหลังจากการทดลองเล็กน้อยฉันพบว่าคุณสามารถใช้ {{.}} เพื่ออ้างถึงองค์ประกอบปัจจุบันของอาร์เรย์:
<ul>
{{#yourList}}
<li>{{.}}</li>
{{/yourList}}
</ul>
Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
จากคำตอบของ @ danjordan สิ่งนี้จะทำในสิ่งที่คุณต้องการ:
Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
กลับมา:
<ul><li>foo</li><li>bar</li><li>baz</li></ul>
{a:'foo',b:'bar',c:'baz'}
...
ต่อไปนี้เป็นตัวอย่างในการแสดงอาร์เรย์หลายมิติในเทมเพลต:
ตัวอย่าง 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);
ตัวอย่าง 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);
สำหรับการทดสอบให้บันทึกตัวอย่างด้านบนในไฟล์ชื่อ 'test.js' เรียกใช้คำสั่งต่อไปนี้ใน commandline
nodejs test.js
ไม่คิดว่าหนวดจะทำแบบนี้ได้! (น่าแปลกใจ) คุณสามารถทำซ้ำรายการวัตถุจากนั้นเข้าถึงคุณลักษณะของแต่ละวัตถุ แต่ดูเหมือนว่าคุณจะทำซ้ำในรายการค่าง่ายๆไม่ได้!
ดังนั้นคุณต้องแปลงรายการของคุณเป็น:
[ {"value":"foo"},{"value":"bar"},{"value":"baz"} ]
จากนั้นเทมเพลตของคุณจะเป็น:
<ul>
{{#the_list}}
<li>{{value}}</li>
{{/the_list}}
</ul>
สำหรับฉันดูเหมือนว่านี่จะเป็นปัญหาที่รุนแรงกับ Moustache - ระบบเทมเพลตใด ๆ ควรจะวนซ้ำรายการค่าง่าย ๆ ได้!
Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);