2013-03-23 21 views
8

Neden aynı JSON nesne kodu ul öğeleriyle çıktı üretir, ancak table etiketiyle değil. İşte Bıyık Şablon tablonun içinde görüntülenmiyor tılsım

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

javascript kodudur: - http://jsfiddle.net/pRSjH/2/

+0

değiştirin. –

cevap

1

divTable.innerHTML döner this yerine doğru şablon İşte

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

jsFiddle üzerinde kodudur

ben gibi benim Bıyık şablon var . Muhtemelen, tarayıcının geçersiz HTML oluşturmaya çalışması nedeniyle gerçekleşir. Ben bu sorunu (the fiddle) tbody içinde

+1

Hey teşekkürler. Bu işe yarıyor. Ve yaptığım şey, ayrı bir table.tpl dosyası oluşturup, onu anında getirdi ve yüklendiğinde, verilerle tempold edildi. – divinedragon

27

yapabilirsiniz ayrıca comment bıyık etiketleri çözmek için <script> etiketi içine şablon koyabilirsiniz düşünüyorum. Ve masa doğru şekilde inşa edilecek.
Benim şablonu örneği: ": Mary fname", bu büyük sorunu çözmez, ama tabloda baskılı yararsız öğrenci koleksiyonları önleyecektir için: "John adı"

<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> 
+0

Beni az önce kurtardığın adam. Bu doğru cevap olmalı. Teşekkürler – tiagojpdias

İlgili konular