javascript - RequireJS - Marionette ItemView 上的延迟加载模板

Question

我正在尝试延迟加载 Marionette ItemView 的模板，但事情没有按我预期的方式工作。根据有关如何重写 getTemplate 方法的一些提示，我执行了以下操作:

getTemplate: function () {
    var template = require(['text!templates/login/loginbox-template.html'], function (template) {
        return template;
    });
    return _.template(template);
}

但是输出的是require方法的函数体。

function localRequire(deps, callback, errback) (... and so on)

返回 require 方法也不起作用:

getTemplate: function () {
    return require(['text!templates/login/loginbox-template.html'], function (template) {
        return _.template(template);
    });
}

这在控制台中给了我一些错误:

Uncaught RangeError: Maximum call stack size exceeded jquery-1.11.js?v=1393591915026:5801
Uncaught TypeError: Object #<Object> has no method 'slice' 

似乎是在 require 完成之前返回了 getTemplate 方法。我可以将返回值包装在 setTimeout 函数中，但这并不是一个好的解决方案。

关于如何处理这个问题有什么想法吗？

Answer 1

当 require() 用于延迟加载内容时，它是异步的。返回值是无关紧要的。你需要的是这样的:

getTemplate: function () {
    var template;
    require(['text!templates/login/loginbox-template.html'], function (t) {
        template = t;
        // signal the application that template is resolved; I suggest promises
    });
}

异步是指执行的结果不能立即获得。注释signal the application...是代码的占位符，它将通知应用程序的其他部分结果实际上可用并且他们可以继续处理。如果您没有预料到的话，这会很乏味，但事情就是这样。

看看JS Promise API ，由许多优秀的库实现，来自 jQuery到独立Q library .