如何在本地渲染胡子模板

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在JSON文件，而你在JS使用a_tutorials
• 使用標題時json文件中的標題

• 您的json文件不正確。 例如這條線

  “ Title”：“ Binary”，

必須通過以下方式進行更改：

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