Question

Currently in a Backbone project I am working on, I have combined all templates by modules. Something like:

• users.html
  • #profileTemplate
  • #changePasswordTemplate
  • …
• something.html
  • #someTemplate
  • #anotherTemplate

Then I load templates by modules as required with $.get. I am intending to use Backbone Marionette to load these templates and the suggested method is: link

Backbone.Marionette.TemplateCache.loadTemplate = function(templateId, callback){
  var that = this;
  var url = templateId + ".html";

  $.get(url, function(templateHtml){
    var template = $(templateHtml).find(templateId);
    callback(template);
  });
}

This will mean I have to break my templates down into even more files, meaning alot more network requests. I wonder whats the recommended way of doing this? Combine everything into 1 big file or many small files or somewhere in between by modules? If by modules then I will need to add a parameter to loadTemplate(moduleUrl, templateSelector, callback) havent tried that, will do that tomorrow, but is that recommended even if it does not break anything? I am overriding a 3rd party framework method and worse, changing its method signature? What the recommended solution then?

Maybe since I am using RequireJS, my templates can be loaded via Require?

Answer 1

I wonder whats the recommended way of doing this?

the recommended way is to not load files asynchronously. load everything you need all at once, right away, whenever possible.

“Async does not make things go fast. Async is what you do when you CAN’T make something go fast enough.” – https://twitter.com/izs/status/216954021926285313

Maybe since I am using RequireJS, my templates can be loaded via Require?

Yes.

Let RequireJS optimize your template by pre-compiling them, and concatenating them in to your app’s file w/ the r.js plugin. This will significantly improve the performance of your app.

…

In the off-chance that you really do need to do async loading of templates and modules, group things in to the smallest number of files possible the way you have been thinking. You would need to modify the code you referenced to handle this.