Генерация 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. Я пробовал много вещей отсюда, но я не могу это исправить.

Я надеюсь, что кто-то может помочь мне!


json php html jquery mustache
person Shouldz    schedule 23.10.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы перебрать коллекцию элементов, у вас должны быть данные, структурированные следующим образом:

{
  "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>
person Danijel    schedule 23.10.2014
comment
Всем привет! Спасибо за ваш ответ, но он не работает .. Я думаю, мне нужно перестроить файл JSON .. но есть так много разных способов заставить его работать с усами .. Спасибо за вашу помощь! - person Shouldz; 24.10.2014
comment
Вы, вероятно, что-то неправильно поняли, но я бы не согласился, что это не работает. - person Danijel; 24.10.2014
comment
я не мог установить фигурные скобки в функции jQuery. Совет с текстом/шаблоном был великолепен! :) - person Shouldz; 27.10.2014

arrow_upward
0
arrow_downward

Проблема была не в файле 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>

Может быть, это поможет кому-то в будущем!

person Shouldz    schedule 24.10.2014
comment
Ваш исходный пример работает, вам нужно только изменить тип шаблона на text/template, или он будет выполнен как javascript. Я не знал, что точечная запись работает с массивами верхнего уровня (это не задокументировано ). Этот ответ имеет один большой недостаток. Все элементы в json будут отображаться на каждой итерации. Используйте console.log(html) внутри каждого, и вы увидите. Итак, вам нужно добавить html, например: $('#output').append(Mustache.render( $('#itemGen').html(), this)); или без каждого цикла: $('#output').html( Mustache.render($('#itemGen').html(), data)); - person Danijel; 24.10.2014
comment
Он отображал только одну запись json без каждой функции, теперь он перебирает json и генерирует для каждой записи шаблонный код. Это все, что я хотел, или вы думаете, что будет проблема с большим количеством записей Json? Когда у меня возникнут проблемы, я попробую ваши примеры. Спасибо за вашу помощь! :) - person Shouldz; 27.10.2014