Mẫu Mustache không hiển thị bên trong bảng tbody

Question

Tại sao cùng một mã đối tượng JSON tạo đầu ra với các phần tử ul, nhưng không phải với thẻ table.

Tôi có Moustache mẫu của tôi như:

<div id="template-ul"> 
    <h3>{{name}}</h3> 
    <ul> 
     {{#students}} 
     <li>{{name}} - {{age}}</li> 
     {{/students}} 
    </ul> 
</div> 

<div id="template-table"> 
    <table> 
     <thead> 
      <th>Name</th> 
      <th>Age</th> 
     </thead> 
     <tbody> 
     {{#students}} 
      <tr> 
       <td>{{name}}</td> 
       <td>{{age}}</td> 
      </tr> 
     {{/students}} 
     </tbody> 
    </table> 
</div> 

Đây là đoạn mã javascript:

var testing = { 
    "name" : "student-collection", 
    "students" : [ 
     { 
      "name" : "John", 
      "age" : 23 
     }, 
     { 
      "name" : "Mary", 
      "age" : 21 
     } 
    ] 
}; 

var divUl = document.getElementById("template-ul"); 
var divTable = document.getElementById("template-table"); 

divUl.innerHTML = Mustache.render(divUl.innerHTML, testing); 
divTable.innerHTML = Mustache.render(divTable.innerHTML, testing); 

Đây là đoạn mã trên jsFiddle - http://jsfiddle.net/pRSjH/2/

Answer 1

divTable.innerHTML lợi nhuận this thay vì mẫu đúng . Có thể điều này xảy ra vì trình duyệt cố gắng hiển thị HTML không hợp lệ. Tôi nghĩ rằng bạn có thể đặt mẫu của bạn vào <script> thẻ để giải quyết vấn đề này (the fiddle)

Answer 2

Bạn cũng có thể bình luận thẻ ria mép trong tbody. Và bảng sẽ được xây dựng chính xác.
Ví dụ mẫu của tôi:

<div id="template-table"> 
    <table> 
     <thead> 
      <th>Name</th> 
      <th>Age</th> 
     </thead> 
     <tbody> 
     <!--{{#students}}--> 
      <tr> 
       <td>{{name}}</td> 
       <td>{{age}}</td> 
      </tr> 
     <!--{{/students}}--> 
     </tbody> 
    </table> 
</div>