Using multiple precompiled templates with Handlebars.js (multiple HTTP requests)?

Question

I think this question will give me a little more context:

Using precompiled templates with Handlebars.js (jQuery Mobile environment)

I mainly try to learn precompilation, so I can save loading time and keep my html documents neat. I have not started it yet, but based on the above link, each template should have its own file. Won't it be many download links? I do not want to make multiple HTTP requests unless I need it.

So, if someone can shed some light, perhaps suggest an alternative where I can get the templates from my html but not download 100 different template files.

Answer 1

Tools like Grunt.js allow you to have your templates and consume them too. For example, this file compiles templates and then combines them into one file:

module.exports = function(grunt) { grunt.loadNpmTasks("grunt-contrib-handlebars"); // Project configuration. grunt.initConfig({ // Project metadata, used by the <banner> directive. meta: {}, handlebars: { dist: { options: { namespace: "JST", wrapped: "true" }, files: { "templates.js": [ "./fileA.tmpl", "./fileB.tmpl" ] } } } }); // Default task. grunt.registerTask("default", "handlebars"); }; 

What I have not developed yet, since I am just starting out with pre-compiled templates, is a workflow. I want to have compiled templates when we launch the deployed version of the application, but when developing and debugging, I would prefer to have my original separate files in an unrelated form, so I can just edit them and reload the page.

Follow Up:

I wanted to get back to this after working out some of the ways I have my precompiled templates when they are available, and using separate templates that can be edited on the fly when people are developing and debugging, and would like to have fast edit-reload cycles without having to build Grunt.

The answer I came up with was to check for the existence of the JST [] data structure, and then to check and verify if a particular precompiled template is present in this structure. If this is the case, then nothing more needs to be done. If it is not there, then the template is loaded (we use RequireJS for this) and compiled and placed into the same JST [] array under the same name as if the pre-compiled templates were loaded.

Thus, when it comes time to actually use the template, the code searches for it in only one place and is always the same.

In the near future, I think we will most likely have RequireJS plugins to run the test and download / compile the code, keeping it simple for developers.