RequireJS 文本插件和变量连接字符串答案

【问题标题】：RequireJS text plugin and variable concatenated stringRequireJS 文本插件和变量连接字符串
【发布时间】：2013-01-07 09:53:20
【问题描述】：

我正在使用 RequireJS 文本插件来加载一些 html 模板。当我将字符串文字传递给 require 函数时，它工作正常。

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

但是当我使用可变连接字符串时

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

它会抛出以下错误：

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

对这个问题有什么想法吗？

更新：这是我的测试代码。

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 文本版本：2.0.3
RequireJS 版本：2.1.1

【问题讨论】：

标签： javascript requirejs amd

【解决方案1】：

在数组中定义路径以确保它在使用之前加载它

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

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

【讨论】：

【解决方案2】：

你试过这种方式吗？

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);
   });
});

只是一个想法，告诉我进展如何。

【讨论】：

【解决方案3】：

require 中的依赖扫描仅适用于字符串文字依赖。您应该查看 require.js 源，并尝试找到 cjsRequireRegExp 变量。如前所述，您可以使用回调符号加载内容。

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

【讨论】：

【解决方案4】：

我在尝试使用 Backbone/Marionette 时也遇到了这个问题。感谢上面的@Ignacio 和@Stanislau Tsishkou 提供的见解。

我能够使用数组+回调方法解决它：

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); 
  },

  // ...
});

重要的部分是：

确保将回调中返回的结果 templateHTML 设置为可在适当范围内访问的变量（实现此目的的是 templateHTML = 模板）。
如果使用 Marionette，请确保使用函数来生成模板，因为这不会在实际需要模板HTML 之前尝试呈现它。
如果使用把手，就像我在这个例子中一样，请务必使用 apply 方法，因为我必须将模板函数中使用的任何参数传递给它，因为 Handlebars.compile() 返回的是一个函数，而不是编译后的模板文本。

如果您不使用 Handlebars，仅使用 Underscore 或 Lodash，marionette 文档提供了一个很好的示例 - 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
  });
}

【讨论】：