Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stock my Mustache / Handlebars templates in separate files?

I'm using handlebars.js on a project and I'm starting to have a fair amount of templates. For now they are stored in my main template app file, like this :

<script id="avatar_tpl" type="text/html">
bla bla bla {{var}} bla bla bla
</script>

I'm wondering if there is a way to put them in a separate file like a .js file or something, to avoid stacking them up in my source code page.

I'm aware that there are several solutions to call theses templates via Ajax, but that seems to result in too much unnecessary requests for me.

Thank you

like image 922
mdcarter Avatar asked Oct 17 '11 14:10

mdcarter


People also ask

What are mustache files?

Mustache is a logic-less templating system. It permits you to use pre-written text files with placeholders that will be replaced at run-time with values particular to a given request.

What are handlebars files?

What is Handlebars? Handlebars is a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.

Is mustache a template engine?

Mustache is a logicless template engine for creating dynamic content like HTML, configuration files among other things.


1 Answers

I created and open-sourced NodeInterval for this exact same problem of too many js templates in my HTML page.

It allows you to put all your templates into a templates folder organized in whatever hierarchy you like. It has a built in watch capability so that as you modify any of these templates it automatically updates your HTML page. I use it alongside SASS for my CSS.

I use it daily with underscore templates but it should work fine with moustache templates as well:

https://github.com/krunkosaurus/NodeInterval

like image 78
Mauvis Ledford Avatar answered Sep 29 '22 06:09

Mauvis Ledford