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

我尝试使用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>

var数据、模板、html；
$.getJSON（'item.json'，函数（数据）{
var template=$（'#itemGen'）.html（）；
var html=Mustache.to_html（模板、数据）；
$（'#output'）.html（html）；
});
{{#.}}
{{titel}}
{{tags}}

{{media}}

{{/.}}

所以它基本上可以工作，但是它只接受JSON文件的最后一个条目，而不关心第一个条目。我想为JSON文件中的每个条目获取一个新的“myItem”DIV。我在这里试了很多东西，但都没法修好

---

我希望有人能帮助我

要循环项目集合，您的数据结构必须如下所示：

{
  "items": [
    { "titel": "headline", ... },
    { "titel": "headline2", ... },
    ...
  ]
}

在您的情况下，类似于：

var html = Mustache.render( $('#itemGen').html(), { items: data } );
$('#output').html( html );   

此外，要在HTML中包含模板，请使用

，例如：

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

{{{#项目}
{{titel}}
{{tags}}

{{media}}

{{/items}

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

var数据、模板、html；
$.getJSON（'item.json'，函数（数据）{
var template=$（'#itemGen'）.html（）；
$.each（数据，函数（）{
var html=Mustache.to_html（模板、数据）；
$（'#output'）.html（html）；
});   
});

---

也许它对将来的人有帮助

你好！谢谢你的回答，但它不起作用。。我想我必须重建JSON文件。。但是有很多种不同的方法可以让胡子起作用。。谢谢你的帮助！您可能误解了某些内容，但我不同意它不起作用。我无法在jQuery函数中设置花括号。。带有文本/模板的提示非常棒！：）您的原始示例可以工作，您只需要将模板类型更改为

text/template

，否则它将作为javascript执行。我不知道点表示法可以与（它没有文档记录）一起使用。这个答案有一个很大的缺陷。json中的所有项都将在每次迭代中呈现。在每个控制台中使用

console.log（html）

，您将看到。所以您需要附加html，比如：

$（'#output'）.append（Mustache.render（$（'#itemGen'）.html（），this））

或不带each循环：

$（'#output'）.html（Mustache.render（$（'#itemGen'）.html（），data））

它只呈现了一个json条目而没有each函数，现在它遍历json并为每个条目生成模板化代码。这就是我想要的，或者你认为更多的Json入口会有问题吗？当我遇到麻烦时，我会试试你的例子。。谢谢你的帮助！：）