Mustache.js 반복문

Mustache.js 반복문

예시 1

<style>  
.mytable { border-collapse:collapse; }  
.mytable th, .mytable td { border:1px solid black; }
</style>
<table class='mytable'>
  <thead><th>번호</th><th>이름</th></thead>
  <tbody id='students'></tbody>
</table>

<script src='//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js'></script>
<script>
var data = {
students: [
  {num:1, name:'한놈'},
  {num:2, name:'두시기'},
  {num:3, name:'석삼'},
]};
var tmp = "{{#students}}<tr><td>{{num}}</td><td>{{name}}</td></tr>{{/students}}";
document.getElementById('students').innerHTML = Mustache.render(tmp, data);
</script>

예시 2

<style>  
.mytable { border-collapse:collapse; }  
.mytable th, .mytable td { border:1px solid black; }
</style>
<table class='mytable'>
  <thead><th>번호</th><th>이름</th></thead>
  <tbody id='students'></tbody>
</table>

<script src='//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js'></script>
<script>
var students = [
  {num:1, name:'한놈'},
  {num:2, name:'두시기'},
  {num:3, name:'석삼'},
];
var tmp = "{{#.}}<tr><td>{{num}}</td><td>{{name}}</td></tr>{{/.}}";
document.getElementById('students').innerHTML = Mustache.render(tmp, students);
</script>

같이 보기

• Mustache.js 튜토리얼