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

我想要做的是配置木偶加載外部把手模板文件，而不是做<script id="templateId" type="text/template">...</script>。木偶：加載外部把手模板文件

我偶然發現@Derick Bailey的帖子在External handlebars templates backbone marionette ......但顯然，它並不適用於我，因爲我得到了相同的「回調未定義」，正如其中一條評論所指出的那樣。順便說一句，我正在使用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

如何解決呢？我花了幾個小時試圖解決這個問題，但我現在感到沮喪。

非常感謝。

來源

2014-09-29 limc

我想通了這個問題的解決方案： -

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); 
};

如果要改爲加載外部下劃線的模板文件，那麼你可以放心地忽略Marionette.TemplateCache.prototype.compileTemplate使木偶將使用下劃線模板，這是默認。

來源

2014-09-30 13:09:27 limc

這個答案重複我的答案中提到的最後一個鏈接。請刪除它。 – 2014-09-30 21:21:26

@VahanVardanyan *真實*問題是*您的*答案不包括鏈接中提到的信息。 – 2015-03-29 14:10:46

實施中的主要問題在於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。

來源

2014-09-29 20:11:20

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

回答

相關問題