3

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

模板加载器.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上面的代码不应该存在。

4

1 回答 1

2

这是文档中描述的语法糖的副作用：

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语句在 aswitch中，它保证只匹配一个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 在同步模式下工作的方法时，这是有道理的。

于 2013-05-14T18:17:04.267 回答