Question

我尝试使用Mustache.js和JSON文件生成HTML内容

这是我用PHP生成的JSON文件

[
 {
    "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文件的最后一个条目，而不关心第一个。我想为我的JSON文件中的每个条目获取一个新的“myItem”DIV。我从这里尝试了很多东西，但我无法解决它。

我希望有人可以帮助我！

Answer 1

要循环收集项目，您必须具有以下结构的数据：

{
  "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>

Answer 2

问题不在于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>

也许它有助于将来的某个人！

使用Mustache.js和JSON生成HTML内容

2 个答案: