CODEWITHSUNDEEP
javascripttemplatesrequirejs
danp
danp

Reputation: 15241

Template loading with requirejs in an optimizable way

I'd like to load all my templates for a project with a module, but I'm not sure that the way that I'm doing it (a) will let the code be optimized with r.js and (b) makes sense - basically, I'm concerned that a nested require inside a define() block won't get picked up by the optimizer. Ideally I'd like to have a minified single file which is all the dependencies, including text files if possible, after running r.js.

template_loader.js

define(["jquery","underscore","icanhaz"],function($,_,ich){


    var template_names = [  
        'test'
    ];

    require([
        'text!templates/test.tpl',
    ],function (){
        for (var i = arguments.length - 1; i >= 0; i--) {
            ich.addTemplate(template_names[i],arguments[i]);
        };      
    });


});

And then in my main app.js:

require(['jquery','underscore','backbone','icanhaz','template_loader'],function($,_,Backbone,ich,loader){

    // templates should be available here as ich.template_name()

});

The goal is have one place which is handling template resource loading, which are then available to other modules.

Does this seem like a good way of doing it, and if not, what is a better strategy?

Upvotes: 0

Views: 823

Answers (1)

Simon Smith
Simon Smith

Reputation: 8044

If you wanted to load all the modules in one go, you could try something like:

generic_templates.js

define(function(require){
    var tpl1 = require('text!generic_tpl1');
    var tpl2 = require('text!generic_tpl2');
    // etc

    return {
        tpl1: tpl1,
        tpl2: tpl2
    }
});

app.js

require(['generic_templates'], function(genericTemplates) {

    console.log(genericTemplates.tpl1) // some html

});

Upvotes: 2

Related Questions