Как установить библиотеку усов?

Question

Существует файл для папки усов с именем mustache.js-master в github. У него есть несколько различных файлов, включая mustache.min.js, mustache.js, папку bin, папку hooks, папку spec, test и т. Д. Как установить усы, просто загрузите файл и включите mustache.js в мой кода, или есть способ установить файл?

Я просто включил файл mustache.js в папку проекта и написал тег в своем коде. Вот какой код, который я написал, чтобы посмотреть, работает ли он, вывод из console.log и document.write пуст. Что-то не так с моим кодом, или я должен установить усы по-другому?

<script type ="text/javascript" src ="jquery.js"></script> 
<script type="text/javascript" src = "mustache.js"></script> 

<script> 

    var template; 
    var data; 

    template = '<div><h2>{{Title}}</h2><p>{{Course}}</p><p>{{Category}}</p></div>'; 

    data = '[{"Title":"Algorithms","Course":"CSI241","Category":"science"},{"Title":"Fluid dynamics","Course":"PHY345","Category":"science"}]'; 

    var html = Mustache.to_html(template,data); 

    console.log(html); 

    document.write(html); 

</script> 

Answer 1

Загрузите mustache.min.js file, так как вы не собираетесь изменить этот код.

Но у вас есть еще одна проблема: to_html ожидает шаблон и объект. Ваша переменная data - это строка, содержащая некоторый JSON. Вы должны разобрать его как JSON (если вы получаете его как строку) или передать его непосредственно в качестве объекта (если вы уже знаете, что у вас там).

Я также обернул ваш массив data в объект, подобный этому { data: data }, чтобы иметь возможность повторять фрагменты.

Вот пример:.

var template = '{{#data}}<div><h2>{{Title}}</h2><p>{{Course}}</p><p>{{Category}}</p></div>{{/data}}'; 
 

 
var data = JSON.parse('[{"Title":"Algorithms","Course":"CSI241","Category":"science"},{"Title":"Fluid dynamics","Course":"PHY345","Category":"science"}]') 
 

 
var html = Mustache.to_html(template, { data: data }); 
 

 
document.body.innerHTML = html;

<script src="https://cdn.rawgit.com/janl/mustache.js/master/mustache.min.js"></script>