Генериране на 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 без функцията each, сега обхожда json и генерира за всеки запис шаблонния код. Това е всичко, което исках, или мислите, че ще има проблем с повече записи в Json? Когато изпадна в затруднение, ще опитам вашите примери.. Благодаря ви за помощта! :) - person Shouldz; 27.10.2014