Генерация HTML-контента с использованием Mustache.js и JSON
Я пытаюсь сгенерировать HTML-контент с помощью Mustache.js и JSON-файла.
Это мой файл JSON, который генерируется с помощью PHP
[
{
"titel": "headline",
"tags": "tags, tags",
"media": "statisch",
"teaser": "css3.png"},
{
"titel": "headline2",
"tags": "tags, tags",
"media": "statisch",
"teaser": "html5.png"}
]
Вот что я сделал в HTML
<script type="text/javascript">
var data, template, html;
$.getJSON('item.json', function(data) {
var template = $('#itemGen').html();
var html = Mustache.to_html(template, data);
$('#output').html(html);
});
</script>
<script id="itemGen" type="text/javascript">
{{#.}}
<div class="myItem">
<h1>{{titel}}</h1>
<p>{{tags}}</p>
<p>{{media}}</p>
<img src="upload/{{teaser}}">
</div>
{{/.}}
</script>
Таким образом, это в основном работает, но оно берет только последнюю запись в файле JSON и не заботится о первой. Я хочу получить новый DIV «myItem» для каждой записи в моем файле JSON. Я много чего пробовал отсюда, но не могу это исправить.
Я надеюсь, что кто-то может помочь мне!
Решение
Чтобы перебрать коллекцию элементов, у вас должны быть данные, структурированные так:
{
"items": [
{ "titel": "headline", ... },
{ "titel": "headline2", ... },
...
]
}
В вашем случае что-то вроде:
var html = Mustache.render( $('#itemGen').html(), { items: data } );
$('#output').html( html );
Также для включения шаблона в использование HTML <script id="itemGen" type="text/template">, пример:
<script id="itemGen" type="text/template">
{{#items}}
<div class="myItem">
<h1>{{titel}}</h1>
<p>{{tags}}</p>
<p>{{media}}</p>
<img src="upload/{{teaser}}">
</div>
{{/items}}
</script>
Другие решения
Проблема была не в файле JSON, ему нужна только функция .each (), и теперь она работает!
Вот что я сделал:
<script type="text/javascript">
var data, template, html;
$.getJSON('item.json', function(data) {
var template = $('#itemGen').html();
$.each(data, function(){
var html = Mustache.to_html(template, data);
$('#output').html(html);
});
});
</script>
Может быть, это поможет кому-то в будущем!