Include Templates - pfaciana/latte-js GitHub Wiki

You can include one template in another using {include} and {extends) tags. Although it may be useful if you want to port an existing set of Smarty templates in Javascript, you may be better off using {function} or {capture}. You may also consider creating a custom plugin.

Whenever Latte come across either of template inclusion tags it calls Latte.prototype.getTemplate() method and passes it a value of tag's file parameter. The method must return the template's text.

The default implementation of getTemplate() throws an exception. So, it is up to a Latte user to override this method and provide template's text.

<script>
Latte.prototype.getTemplate = function(name) {
    return document.getElementById(name).innerHTML;
}
</script>

<script id="included_tpl" type="text/x-latte-tmpl">
Hello from included!
</script>

<script id="main_tpl" type="text/x-latte-tmpl">
This template includes another template
{include file='included_tpl'}
</script>

<script>
    var tpl = new Latte(document.getElementById('main_tpl').innerHTML);
    var res = tpl.fetch({});
</script>

The result would be

This template includes another template
Hello from included!