requirejs 文本插件下载所有不需要的模板

Question

我正在使用 RequireJS 和文本插件在 Backbone Layout Manager 中动态加载 Handlebar 模板。但是在页面加载时，所有模板都会被下载而不是指定的模板。 在下面显示的情况下，当我只想渲染页脚时，所有文件（header、modal）都会被获取，而不仅仅是footer.tpl。

templateLoader.js

define(function (require) {
    var Handlebars = require('handlebars');

    var getTemplateFile = function (templateName) {
        var tmpl = null;
        switch (templateName) {

        case 'header':
            tmpl = require('text!../html/templates/header.tpl');
            break;
        case 'footer':
            tmpl = require('text!../html/templates/footer.tpl');
            break;
        case 'modal':
            tmpl = require('text!../html/templates/modal.tpl');
            break;
        }
        return tmpl;
    };


    var _compiled = function (tpl, context) {
        var compiled = Handlebars.compile(tpl);
        return context ? compiled(context) : compiled;
    };

    return {
        getTemplate: function (templateName, model) {
            return _compiled(getTemplateFile(templateName), model);
        }
    }
});

MyView.js - 布局管理器

App.Views.StoreFooter = Backbone.Layout.extend({
    beforeRender: function () {
        this.$el.html(Templates.getTemplate('footer'));
    }
});

当我检查在 Chrome 中下载的资源时，我看到 modal.tpl、header.tpl 根据上面的代码不应该存在。

Answer 1

这是 语法糖 的副作用，在 documentation 中描述：

---

define(function (require) {
    var dependency1 = require('dependency1'),
        dependency2 = require('dependency2');

    return function () {};
});

AMD 加载器会使用 Function.prototype.toString() 解析出 require('') 调用，然后在内部将上述定义调用转换为：

define(['require', 'dependency1', 'dependency2'], function (require) {
    var dependency1 = require('dependency1'),
        dependency2 = require('dependency2');

    return function () {};
});

---

由于它将函数体解析为字符串，它无法看到require 语句位于switch 中，而switch 保证只匹配一个case。

编辑：

我认为这可以通过稍微重构您的代码来解决：

var getTemplateFile = function (templateName) {
    var path = null;

    switch (templateName) {
    case 'header':
        path = 'text!../html/templates/header.tpl';
        break;
    case 'footer':
        path = 'text!../html/templates/footer.tpl';
        break;
    case 'modal':
        path = 'text!../html/templates/modal.tpl';
        break;
    }

    return require(path);
};

不幸的是，这会导致：

未捕获的错误：尚未为上下文加载模块名称“text!blah.txt_unnormalized2”：_

...当您意识到这只是 语法糖，而不是让 RequireJS 在同步模式下工作的一种方式时，这是有道理的。