Question

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

我已经按照教程进行了说明，但是浏览器中没有任何显示，也没有错误消息。

HTML

div id="repeatcontent"/div

脚本：我导入胡须，增强模板脚本，然后使用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尝试找出它，但是它返回了我要求的所有数据。

Answer 1

您的错误是：

a_tutorials

A_tutorials 使用 title
标题
您的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>

如何在本地渲染胡子模板

1 个答案: