在对象数组中使用 Mustache.js 呈现模板数据

Question

我正在使用 mustache.js 来呈现 2 个用户数据的模板。由于某些错误，我无法获得结果，但对于单个对象我得到了结果。有人可以帮忙吗？

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>
<script>
$(document).ready(function(){
    $('button').click(function(){
        loadUser();
    });
});
</script>
</head>
<body> 
<button>Click Me!</button>
<div id="target"></div>

<script>
function loadUser() {
  var template = $('#template').html();
  var jdata = [{name: "Luke", age:"43"},{name:"Lara",age:"19"}];
  var rendered = Mustache.render(template, jdata);
  $('#target').html(rendered);
}
</script>
<script id="template" type="x-tmpl-mustache">
<p>Hello {{ name }}! with age {{age}}</p>
</script>
</body>
</html>

Answer 1

您收到此错误是因为小胡子模板中缺少重复表达式。使用下面的代码来定义模板。

<script id="template" type="x-tmpl-mustache">
    {{#.}}<p>Hello {{name}}! with age {{age}}</p>{{/.}}
</script>

在对象数组中使用 Mustache.js 呈现模板数据

Rendering template data with Mustache.js in array of objects

javascript

mustache

underscore.js

handlebars.js