时间戳

首页 > 解决方案 > 如何在本地渲染小胡子模板

javascript - 如何在本地渲染小胡子模板

问题描述

我正在尝试使用 mustache 和 jQuery 导入 JSON 并创建 html 模板。

我已经按照教程做到了这一点，但浏览器中没有显示任何内容，也没有错误消息。

HTML

div id="repeatcontent"/div

脚本：我导入 mustache，增加模板脚本，然后使用 javascript 导入 JSON。

 <script src=mustache.min.js></script>

<script id="tutorials" type="text/template">
        {{#a_tutorials}}
            <p>{{title}}<p/>
        {{/a_tutorials}}
    </script>


<script type="text/javascript">
        $(document).ready(function(){ 
            $.getJSON('audacity_tutorials.JSON', function(data) {
                var template1 = $('#tutorials').html();
                var html = Mustache.to_html(template1, data);
                $('#repeatcontent').html(html);
            });
        });
</script>

JSON

{   
    "A_tutorials" : [
        {
             "Title" : "Binary",
        },
        {
             "Title" : "Clipping", 
        }
     ]
}

没有错误消息，屏幕完全空白。我也使用了 console.log 来尝试解决这个问题，但它会返回我要求的所有数据。

标签： javascriptjqueryjsonmustache

解决方案

你的错误是：

  • 在 js 中使用 a_tutorials 时，json 文件中的A_tutorials
  • 使用标题时 json 文件中的标题

  • 您的 json 文件不正确。例如这条线

    “标题”：“二进制”，

必须更改为：

"Title" : "Binary"

你可以自己在线测试json。

小胡子区分大小写。

// $.getJSON('z.json', function(data) {
  var data = {
  "A_tutorials" : [
    {
      "Title" : "Binary"
    },
    {
      "Title" : "Clipping"
    }
  ]
};
  
  
  var template1 = $('#tutorials').html();
  var html = Mustache.to_html(template1, data);
  $('#repeatcontent').html(html);
// });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script id="tutorials" type="text/template">
  {{#A_tutorials}}
  <p>{{Title}}<p/>
  {{/A_tutorials}}
</script>

<div id="repeatcontent"></div>

推荐阅读