RequireJS text plugin and variable concatenated string

问题

I'm using RequireJS text plugin to load some html templates. When I passing a string literal to the require function it works fine.

var templateHTML = require('text!templates/template_name.html');

But when I using variable concatenated string

var templateName = 'template_name';
var templateHTML = require('text!templates/'+templateName+'.html');

It throws following error:

Uncaught Error: Module name "text!templates/template_name.html" has not been loaded yet for context: _

Any ideas for this problem?

UPDATE: Here's my test code.

require.config({
    paths: {
       text: '../lib/text',
    }
});

define(function (require, exports, module) {
   "use strict";
    require(['text'], function (text) {

       //var templateHTML = require('text!templates/template_name.html');

       var templateName = 'template_name';
       var templateHTML = require('text!templates/'+templateName+'.html');


    });
});

RequireJS text version: 2.0.3
RequireJS version: 2.1.1

回答1:

Define the path in the array to make sure it loads it before using it

var templateName = 'template_name';
require(['text!templates/'+templateName+'.html'], templateHTML);

//now you can use  
this.template =  _.template(templateHTML, {});

回答2:

Have you tried this way?

require.config({
  paths: {
    text: '../lib/text',
  }
});

define(function (require, exports, module) {
  "use strict";
   var templateName = 'template_name';

   require(['text!templates/' + templateName + '.html'], function (template) {
      console.log('loaded template: ', template);
   });
});

Just an idea, tell me how it goes.

回答3:

The dependency scanning inside require works with string literal dependencies only. You should take a look to the require.js sources, and try to find cjsRequireRegExp variable. As was mentioned before you can just load content using callback notation.

cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g

回答4:

I had this problem also while trying to use Backbone/Marionette. Thanks to @Ignacio and @Stanislau Tsishkou above for their insight.

I was able to solve it using the array + callback approach:

var templateName = 'template_name';
var templateHTML = require('text!templates/'+templateName+'.html', function (templateHTML) {
  templateHTML = template;
);

// ...

var View = Backbone.Marionette.ItemView.extend({
  // ...

  template: function() { 
    return Handlebars.compile(templateHTML).apply(null, arguments); 
  },

  // ...
});

The important parts being:

Ensure you are setting the resulting templateHTML that gets returned in the callback to a variable that is accessible in the proper scope (templateHTML = template is what achieves this).
If using Marionette, ensure you are using a function to generate the template, as this will not try to render the templateHTML before it is actually required.
If using handlebars, as I am in this example, be sure to use the apply method as I have to pass it any arguments that are used in the template function, since Handlebars.compile() returns a function, not the compiled template text.

If you're not using Handlebars, only Underscore or Lodash, the marionette docs give a good example - http://marionettejs.com/docs/v2.4.2/marionette.itemview.html#itemview-render

template : function(serialized_model) {
  var name = serialized_model.name;
  return _.template(templateHTML)({
    name : name
  });
}

来源：https://stackoverflow.com/questions/14193466/requirejs-text-plugin-and-variable-concatenated-string

标签

javascript

requirejs

amd