backbone.js - requirejs 文本插件下载所有不需要的模板

Question

我使用 RequireJS 和文本插件在 Backbone 布局管理器中动态加载 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 () {};
});

The AMD loader will parse out the require('') calls by using Function.prototype.toString(), then internally convert the above define call into this:

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

    return function () {};
});

---

因为它将函数体解析为一个字符串，所以它无法看到 require 语句在 switch 中，保证只匹配一个 >案例。

编辑:

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

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

不幸的是，这会导致:

Uncaught Error: Module name "text!blah.txt_unnormalized2" has not been loaded yet for context: _

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