有没有一种简单的方法可以使用handlebars.js 加载包含多个模板的部分,就像使用mustache.js 和来自“jonnyreeves”的 jQuery 插件 https://github.com/jonnyreeves/jquery-Mustache
e.g:
$.Mustache.load('./templates/greetings.htm').done(function () {
$('body').mustache('simple-hello', viewData);
});
In Handlebars.js http://handlebarsjs.com/reference.html你需要注册每个部分,使用Handlebars.registerPartial
你可以这样做:
JavaScript
$(document).ready(function() {
//Get template from server
$.get("http://example.com/template.html").done(function(response) {
var content = $($.parseHTML(response));
//Compile main template
var template = Handlebars.compile(content.filter("#test-template").html());
//You need to register each partial
Handlebars.registerPartial({
foo: content.filter("#foo-partial").html(),
bar: content.filter("#bar-partial").html()
});
//Your data
var data = {
"test": [{
foo: "Foo",
"foo_bar": "Foo-Bar",
bar: "Bar",
bar_foo: "Bar-Foo"
}, {
foo: "Foo2",
"foo_bar": "Foo-Bar2",
bar: "Bar2",
bar_foo: "Bar-Foo2"
}]
};
document.body.innerHTML = template(data);
});
});
模板.html
<!-- template.html -->
<script id="test-template" type="text/x-handlebars-template">
{{#each test}}
{{> foo}}
{{> bar}}
{{/each}}
</script>
<script id="foo-partial" type="text/x-handlebars-template">
<div class="foo">
<h2>{{foo}}</h2>
<div class="foo_bar">{{foo_bar}}</div>
</div>
</script>
<script id="bar-partial" type="text/x-handlebars-template">
<div class="bar">
<h2>{{bar}}</h2>
<div class="bar_foo">{{bar_foo}}</div>
</div>
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)