Question

我正在使用Webpack设置应用程序并使用Backbone Marionette运行前端。我设法让应用程序脚本运行[在App模块内的Controller中生成LayoutView就像在AMD / Require中一样]，但我无法弄清楚的是模板。

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

Uncaught 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'

这适用于Handlebars。我对Jade不熟悉，但我确信它应该是一样的。

Answer 2

这是由于语法错误造成的。我错误地嵌套了template方法中的initialize ->哈希。回答我自己的问题，希望它有助于某人前进。

运行木偶的Webpack应用程序中的外部模板

2 个答案: