Question

我的网站是用bootstrap构建的。我想创建一个div，其数据存储在JSON文件中并使用小胡子进行渲染。我在HTML for Moustache模板中有脚本：

<script id="plutos" type="text/template">
  <div class="col-sm-12 col-md-6 col-xl-4">
    <h3 class="text-center" >{{title}}</h3>
    <img src="{{picture}}" style="width:100%">
    <p class="text-justify" class="text-center">{{plot}}</p>
    <button  type="button" class="btn btn-primary btn-xs red">
      <i class="fa fa-fw fa-thumbs-up"></i> 
    </button>
  </div>
</script>

我的articles.json带数组的数据存储

[{
  "title": "Casa",
  "picture": "img/portfolio/cabin.png",
  "plot": "Per casa si intende una qualunque struttura utilizzata dagli esseri umani per ripararsi dagli agenti atmosferici. Essa generalmente ospita uno o più nuclei familiari e talvolta anche animali.",
  "like": false
}, 
// ...

我有这个JS用于AJAX调用：

$.ajax({
  method: "GET",
  url: "articles.json",
}).done(function( msg ) {
  var template = $('#plutos').html();
  var html = Mustache.to_html(template, msg);
  $('#portfolio').html(html);
});

任何人都可以帮助我吗？

Answer 1

您的数据以数组形式返回，因此请更改此

var html = Mustache.to_html(template, msg);

到

var html = Mustache.to_html(template, msg[0]); // [0] -> get the first object.

如果可行，那么你可以遍历数组来获取每个对象。

Fwiw，我习惯使用render的其他版本：

var html = Mustache.render(template, msg);

从Json获取数据并使用html（使用bootstrap）ajax调用和小胡子模板进行渲染

1 个答案: