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

时间:2014-09-29 19:07:55

标签: javascript templates backbone.js marionette

我想要做的是配置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控制台,我看到了以下内容......

enter image description here

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

非常感谢。

2 个答案:

答案 0 :(得分:0)

您的实施中的主要问题是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方法。

答案 1 :(得分:0)

我已经找到了解决这个问题的方法: -

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模板。