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

时间:2015-10-08 09:07:07

标签: javascript underscore.js handlebars.js mustache

我正在使用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>

1 个答案:

答案 0 :(得分:1)

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

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