2013-03-23 62 views
8

为什么相同的JSON目标代码会生成ul元素的输出,但不会生成table标记。胡须模板不会在表格内呈现tbody

我有胡子的模板,如:

<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代码:

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代码 - http://jsfiddle.net/pRSjH/2/

+0

请更改“姓名:约翰”到“FNAME:玛丽”,这不会解决更大的问题,但将防止在表打印无用学生集合。 – 2013-03-23 12:10:49

回答

1

divTable.innerHTML回报this,而不是正确的模板。 可能是因为浏览器试图呈现无效的HTML而发生。我想你可以把你的模板到<script>标签来解决这个问题(the fiddle

+1

嘿谢谢。这样可行。我做的是创建一个单独的table.tpl文件,并在运行时取出它,并在加载时使用数据进行模板化。 – divinedragon 2013-03-24 03:50:37

27

您还可以评论小胡子标签在TBODY。表格将正确构建。
我的模板,例如:

<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

你刚刚救了我的男人。这应该是正确的答案。谢谢 – tiagojpdias 2015-01-15 18:27:10