Как сделать шаблон усов локально - PullRequest
Новая
       10

Как сделать шаблон усов локально

1 голос
/ 24 июня 2019

Я пытаюсь использовать усы и 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, чтобы попытаться выяснить это, но он возвращает все данные, которые я запрашиваю.

1 Ответ

0 голосов
/ 24 июня 2019

Ваши ошибки:

  • A_tutorials в файле json при использовании a_tutorials в js
  • Заголовок в файле 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>
...