Frage

Suppose I have a module that starts like the following:

define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../templates/requestRow.html!strip', 'text!../templates/respondForm.html!strip'], function($, actions, util, tDialog, tRequestRow, tRespondForm) {

This module contains most of the code for writing to my client UI. It also loads a couple other modules I've written as well as 3 HTML templates using the text.js plugin. I'm wondering if there's a more concise way of doing this? As the application grows, I may have additional templates to load, or modules and it just seems like my define statement could grow to be a bit ugly. Should I just add my template paths to require.config in my main.js like this:

require.config({
baseUrl: '/webrequests/resources/scripts/',
paths: {
    'modernizr': '../js/vendor/modernizr-2.6.2-respond-1.1.0.min',
    'bootstrap' : '../js/vendor/bootstrap.min',
    'dialog' : 'text!../templates/dialog.html!strip',
    'requestRow' : 'test!../templates/requestRow.html!strip',
    'respondForm' : 'text!../templates/respondForm.html!strip'
}});

Is there perhaps some way to load all templates within a directory and just have 1 dependency to include in the define statement?

Thanks in advance.

War es hilfreich?

Lösung

You could make a module for loading in the templates you frequently use. So group the templates to be loaded in one module, that way you can just load this template module instead of the individual templates:

// generalTemplates.js
define([
    'text!../templates/dialog.html!strip', 
    'text!../templates/requestRow.html!strip', 
    'text!../templates/respondForm.html!strip'
], function (tDialog, tRequestRow, tRespondForm) {
    return {
        dialog: tDialog,
        requestRow: tRequestRow,
        respondForm: tRespondForm
    };
});

So that in your module, you can simply include the templates like any other module:

define([
    'jquery', 
    'actions', 
    'util', 
    'generalTemplates'
], function($, actions, util, templates) {
    var tDialog = templates.dialog,
        tRequestRow = templates.requestRow,
        tRespondForm = templates.respondForm;

    /* You can do stuff with the templates here */
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top