marionette - 外部 Handlebars 模板 Backbone Marionette

Question

在我的应用程序中，我添加了 Marionette.sync 插件并覆盖这些方法:

Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (templateId, callback) {
    var tmpId = templateId.replace("#", ""),
        url = "/app/templates/" + tmpId + ".html";

    $.get(url, function (templateHtml) {
        compiledTemplate = Handlebars.compile($(templateHtml).html())
        callback.call(this, compiledTemplate);
    });
};

Backbone.Marionette.Renderer.renderTemplate = function (template, data) {
    template(data);
};

但这行不通，有什么想法吗？

Answer 1

自从您提到 Marionette.Async 插件以来，我假设您正在运行 Marionette v0.9。

方法名称中的 Renderer 更改略有不同，并且不再调用您的 TemplateCache 对象。

如果您打算使用预编译的 Handlebars 函数，那么您只需执行以下操作:

Backbone.Marionette.Renderer.render = function(template, data){
  return template(data);
};

如果您打算使用 TemplateLoader 异步加载模板然后进行编译，您的代码将需要如下所示:

Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (templateId, callback) {
    var tmpId = templateId.replace("#", ""),
        url = "/app/templates/" + tmpId + ".html";

    $.get(url, function (templateHtml) {
        compiledTemplate = Handlebars.compile($(templateHtml).html())
        callback.call(this, compiledTemplate);
    });
};

Backbone.Marionette.Renderer.renderTemplate = function (templateId, data) {
    var renderer = $.Deferred();
    Backbone.Marionette.TemplateCache.get(templateId, function(template){
      var html = template(data);
      renderer.resolve(html);
    });
    return renderer.promise();
};

Renderer负责调用TemplateCache。

<小时/>

旁注:您使用什么文章/博客文章/维基页面/文档来获取代码？我可能错过了一些需要更新的页面。