javascript - 运行 Marionette 的 Webpack 应用程序中的外部模板

Question

我正在使用 Webpack 设置应用程序并使用 Backbone Marionette 运行前端。我已经设法让应用程序脚本运行[在应用程序模块内的控制器中生成 LayoutView，就像在 AMD/Require 中一样]，但我不知道是模板。

过去，我使用过 Underscore 模板，但 webpack 更喜欢 Jade 和 Handlebars。我切换到 Jade，但我的 LayoutView 仍然返回错误：

未捕获的 UndefinedTemplateError：无法呈现模板，因为它为 null 或未定义。

当我控制台注销渲染的 Jade 模板时，我得到：<div class="glossary-container"></div>

这是我的 LayoutView 代码供审查：

Marionette = require 'marionette'
AppLayoutTemplate = (require 'templates/appLayoutTemplate.jade')()
console.log AppLayoutTemplate

class AppLayoutView extends Marionette.LayoutView
  initialize: ->
    template: AppLayoutTemplate
    regions:
      glossaryContainer: '.glossary-container'

Answer 1

为了Handlebars用作模板引擎，Marionette您需要在Marionette.

我建议您在木偶中加载模板并使用某种缓存：

首先重写Marionette.TemplateCache.prototype.loadTemplate：

Marionette.TemplateCache.prototype.loadTemplate = function (yourTemplateId) {

    var yourTemplate, 
        url = 'your/path/to/templates' + yourTemplateId + '.html';

    if (Handlebars.templates && Handlebars.templates[yourTemplateId]) {
        // from cache
        yourTemplate = Handlebars.templates[yourTemplateId];
    } else {
        // from remote resource
      Backbone.$.ajax( {
        async   : false,
        url     : url,
        success : function ( templateHtml ) {
            yourTemplate = templateHtml;
        }
    } );
    }
    return yourTemplate;
};

并重写Marionette.TemplateCache.prototype.compileTemplate

Marionette.TemplateCache.prototype.compileTemplate = function (yourTemplate) {
    if ($.isFunction(yourTemplate)) {
        return yourTemplate;
    } else {
        return Handlebars.compile(yourTemplate);
    }
};

在此之后加载您的视图，如：

Marionette = require 'marionette'
    class AppLayoutView extends Marionette.LayoutView
      initialize: ->
        template: 'path_to_your_template/without_extension'
        regions:
          glossaryContainer: '.glossary-container'

这将适用于把手。我对 Jade 不熟悉，但我敢肯定它应该是一样的。

Answer 2

这是由于语法错误。我错误地将template哈希嵌套在initialize ->方法中。回答我自己的问题，希望它能帮助别人。