Marionette：加载外部 Handlebars 模板文件

Question

我想要做的是将 Marionette 配置为加载外部 Handlebars 模板文件，而不是执行 <script id="templateId" type="text/template">...</script>。

我偶然发现了@Derick Bailey 在External handlebars templates backbone marionette 上的帖子……但显然，它对我不起作用，因为我得到了相同的“回调未定义”，正如其中一位 cmets 所指出的那样。顺便说一句，我正在使用 Marionette 2.2.0...。

这是我想出来的：-

Backbone.Marionette.Renderer.render = function ( templateId, data ) {
    console.log( "render() - " + templateId + " " + JSON.stringify( data, null, 4 ) );

    var promise = Backbone.Marionette.TemplateCache.get( templateId );

    $.when( promise ).done( function ( template ) {
        console.log( "render() - promise fulfilled - " + template );
        return template( data );
    } );
};

Backbone.Marionette.TemplateCache.prototype.loadTemplate = function ( templateId ) {
    console.log( "loadTemplate() - " + templateId );
    var tmpId = templateId.replace( "#", "" ),
        url = "resources/js/templates/" + tmpId + ".html";

    var renderer = $.Deferred();
    $.get( url, function ( templateHtml ) {
        console.log( "loadTemplate() - URL get - " + templateHtml );
        renderer.resolve( Handlebars.compile( templateHtml ) );
    } );

    return renderer.promise();
};

虽然我没有收到任何错误，但我也没有在屏幕上看到任何呈现的模板。

查看 Firebug 控制台，我看到以下内容......

我该如何解决？我花了几个小时试图解决这个问题，但现在我感到很沮丧。

非常感谢。

Answer 1

您的实现中的主要问题在于Backbone.Marionette.Renderer.render 的声明。

当您调用Backbone.Marionette.TemplateCache.get( templateId ) 以接收返回的promise 对象时，Backbone.Marionette.TemplateCache.get( templateId ) 调用Backbone.Marionette.TemplateCache.load。

load: function() {
    // Guard clause to prevent loading this template more than once
    if (this.compiledTemplate) {
      return this.compiledTemplate;
    }

    // Load the template and compile it
    var template = this.loadTemplate(this.templateId);
    this.compiledTemplate = this.compileTemplate(template);

    return this.compiledTemplate;
}

从load 函数的定义中，您可以看到它不会像您预期的那样返回一个promise，但它会调用compileTemplate(template) 并返回它的结果。

正如我从源代码中看到的，您没有更改this.compileTemplate(); 方法，它仍在使用underscores template function。

要解决您的任务，只需修复该问题并重试或使用几乎与建议的here 相同的方法。

Answer 2

我已经想出了这个问题的解决方案：-

Backbone.Marionette.TemplateCache.prototype.loadTemplate = function ( templateId ) {
    var template = '',
        url = 'resources/js/templates/' + templateId + '.html';

    // Load the template by fetching the URL content synchronously.
    Backbone.$.ajax( {
        async   : false,
        url     : url,
        success : function ( templateHtml ) {
            template = templateHtml;
        }
    } );

    return template;
};

// Instruct Marionette to use Handlebars.
Marionette.TemplateCache.prototype.compileTemplate = function ( template ) {
    return Handlebars.compile( template );
};

如果您想加载外部 Underscore 模板文件，则可以放心地省略 Marionette.TemplateCache.prototype.compileTemplate，以便 Marionette 使用默认的 Underscore 模板。