หนวดสามารถทำซ้ำอาร์เรย์ระดับบนสุดได้หรือไม่?


109

วัตถุของฉันมีลักษณะดังนี้:

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

และฉันต้องการใช้เทมเพลตหนวดเพื่อสร้างสิ่งนี้:

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

แต่อย่างไร? ฉันต้องเจาะลึกลงไปในสิ่งนี้ก่อนหรือไม่?

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

คำตอบ:


169

ทำได้แบบนี้ ...

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

2
เทมเพลตมาก่อน: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver

ตัวอย่างเช่นฉันจะได้รับองค์ประกอบที่ 2 ของอาร์เรย์ได้อย่างไร ฉันพยายามทำ {{.1}} ด้วย mustache.js แต่มันใช้งานไม่ได้
thouliha

NM คิดออกแล้ว: คุณสามารถเพิกเฉยต่อจุด: ดังนั้น {{1}} หรือถ้าคุณต้องการตรวจสอบตรรกะแล้ว {{# 1}} อะไรก็ได้ {{/ 1}}
thouliha

8
คุณลักษณะเหล่านี้ได้รับการบันทึกไว้ที่ใดที่หนึ่งหรือไม่? ฉันไม่เห็น{{.}}, {{1}}หรืออะไรที่คล้ายกันในหนวด (5)
Daniel Lubarov

หมายเหตุ: อาร์เรย์ระดับบนไม่ได้รับการสนับสนุนโดยโฮแกน: github.com/twitter/hogan.js/issues/74 ใช้โซลูชันกับคุณสมบัติ: stackoverflow.com/a/8360440/470117
mems

115

เมื่อเช้านี้ฉันมีปัญหาเดียวกันและหลังจากการทดลองเล็กน้อยฉันพบว่าคุณสามารถใช้ {{.}} เพื่ออ้างถึงองค์ประกอบปัจจุบันของอาร์เรย์:

<ul>
  {{#yourList}}
  <li>{{.}}</li>
  {{/yourList}}
</ul>

1
ชื่อของตัวแปร #yourList มาจากไหน? คุณสามารถแสดงตัวอย่างจาวาสคริปต์ของการแสดงผลจริงได้หรือไม่
iwein

3
คุณไม่จำเป็นต้องใช้ "yourList" ด้วยซ้ำคุณสามารถใช้ "" ที่นี่ด้วย: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver

JavaScript จะเป็น Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
Dan Jordan

1
หมายเหตุให้ดำเนินการนี้เฉพาะในกรณีที่คุณต้องการเทมเพลตที่อ่านได้น้อยลง คำตอบที่ได้รับการยอมรับแม้ว่าจะไม่ "จำเป็น" ก็เป็นวิธีที่อ่านได้ง่ายกว่า
timoxley

7
ไม่มีใครรู้ว่าทำไมข้อมูลนี้จึงไม่อยู่ในเอกสาร? mustache.github.io/mustache.5.html
Josh

5

จากคำตอบของ @ danjordan สิ่งนี้จะทำในสิ่งที่คุณต้องการ:

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

กลับมา:

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

มันใช้งานได้เฉพาะกับอาร์เรย์ไม่ใช่สำหรับ objcts เป็นไปไม่ได้สำหรับ{a:'foo',b:'bar',c:'baz'}...
Peter Krauss

1

ต่อไปนี้เป็นตัวอย่างในการแสดงอาร์เรย์หลายมิติในเทมเพลต:

ตัวอย่าง 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

-1

ไม่คิดว่าหนวดจะทำแบบนี้ได้! (น่าแปลกใจ) คุณสามารถทำซ้ำรายการวัตถุจากนั้นเข้าถึงคุณลักษณะของแต่ละวัตถุ แต่ดูเหมือนว่าคุณจะทำซ้ำในรายการค่าง่ายๆไม่ได้!

ดังนั้นคุณต้องแปลงรายการของคุณเป็น:

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

จากนั้นเทมเพลตของคุณจะเป็น:

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

สำหรับฉันดูเหมือนว่านี่จะเป็นปัญหาที่รุนแรงกับ Moustache - ระบบเทมเพลตใด ๆ ควรจะวนซ้ำรายการค่าง่าย ๆ ได้!


4
คุณต้องใช้ {{.}} ดูคำตอบของฉันด้านล่าง
Andy Hull

2
การโหวตลดลงทำให้เข้าใจผิด คำตอบนี้ถูกต้องเนื่องจาก {{.}} ไม่ได้เป็นส่วนหนึ่งของมาตรฐานหนวดแม้ว่าจะได้รับการสนับสนุนจากการใช้งานบางอย่างก็ตาม ไม่มีวิธีพกพาในการทำเช่นนี้
Yefu

อันนี้ถูกต้องและมีประโยชน์มากสำหรับการแสดงผลหลายมิติ โปรดดูตัวอย่างของฉันดังต่อไปนี้
Bhupender Keswani
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.