javascript - How to load multiple templates from handlebars.js partial -
is there easy way load partial, multiple templates in it, using handlebars.js, can using mustache.js , jquery plugin "jonnyreeves"
e.g:
$.mustache.load('./templates/greetings.htm').done(function () { $('body').mustache('simple-hello', viewdata); });
in handlebars.js need register each partial, using handlebars.registerpartial
you can this:
javascript
$(document).ready(function() { //get template 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 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); }); });
template.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>
Comments
Post a Comment