Question

我是Mustache的新手，我对将脚本文件正确转换为模板有疑问。

假设我有以下文件

<script type="text/template" id="template-member-list-item">
   {{#item_data}}
      <tr id="{{user_login}}">
      </tr>
   {{/item_data}}
</script>

要正确地将此文件转换为html，我可以这样做吗？

var template = jQuery(above.html)[0].innerHTML;
var html = Mustache.to_html(template, JSON file);
jQuery('#content').append(html);

这是正确的吗？

Answer 1

<script type="text/javascript" src="http://zeptojs.com/zepto.min.js" ></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js" ></script>
<div id="content"></div>
<script type="text/template" id="template-member-list-item">
   {{#item_data}}
      <tr id="name">
        {{user_login}}
      </tr>
   {{/item_data}}
</script>

<script type="text/javascript">
$(function(){
    var tpl = $("#template-member-list-item").html()
    var html=Mustache.render(tpl,{item_data:{user_login:"test_user"}})
    $("#content").html(html)
})
</script>

Answer 2

这是使用对象调用Enumerable Section 我们总是使用下面的部分来迭代Mustache中的集合 {{＃}} {{/}}

Html将保持不变

   <script type="text/template" id="template-member-list-item">
     {{#item_data}}
    <tr id="{{user_login}}">
     </tr>
    {{/item_data}}
   </script>

JSON输入看起来像

 var data = {
      item_data: [
{   user_login: "Christophe"},
{   user_login: "John"}
]};

这是html模板的渲染

 var template = $("#template-member-list-item").html();
 var html = Mustache.to_html(template, data);
 $('#content').html(html);

有关详细示例，请参阅以下链接 http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/

在Mustache中正确获取模板

2 个答案: