木偶：加载外部把手模板文件

Question

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

我在External handlebars templates backbone marionette偶然发现了@Derick Bailey的帖子......但显然，它并没有为我工作，因为我得到同样的回复＃34;回调是未定义＆＃34;，正如其中一条评论所指出的那样。我顺便使用了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 )以便接收承诺对象时，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函数的定义，您可以看到它不会按预期返回承诺，但会调用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模板。