我想要做的是配置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控制台,我看到了以下内容......
我该如何解决?我花了几个小时试图解决这个问题,但我现在感到沮丧。
非常感谢。
答案 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模板。