Marionette LayoutView在模板中删除了我的根HTML元素

Question

这是我的模板文件outerLayout.html：

<section id="index-wrapper">
    <navigation id="menu">menu1</navigation>
    <article id="content">main content</article>
    <footer id="footer">footer</footer>
</section>

这是我的outerLayout.js

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var Maronette = require('backbone.marionette');
var compiledTpl = require('./outerLayout.html');
// console.info('compiledTpl({})', compiledTpl({}));
    console.info('compiledTpl({})', compiledTpl({}));
var OuterLayout = Backbone.Marionette.LayoutView.extend({
    template: compiledTpl({}), 
    el: '#main',
    regions: {
        menu: '#menu', 
        content: '#content', 
        footer: '#footer'
    }
});

module.exports = new OuterLayout();

以下是路由器中用于呈现layoutView的代码：

var AppRouter = Backbone.Marionette.AppRouter.extend({
    routes : {
        '': 'index'
    }, 
    index : function () {
        var outerLayout = require('../layout/outerLayout/outerLayout');
        outerLayout.render();

    }
    }    
});

渲染结果为：

但结果应该是这个：

简而言之，渲染函数删除了标签，这不是我的目标。我该如何解决？

Answer 1

问题来自Marionette.TemplateCache.loadTemplate和Marionette.TemplateCache.compileTemplate。

从功能注释中可以看出，您需要覆盖它们以便使用其他模板而不是Underscore的_.template()。

负责此行为的loadTemplate定义的实际行（您的问题）是：

var template = Backbone.$(templateId).html();

因为，如果你没有重新loadTemplate和compileTemplate，Marionette将假设您使用默认下划线模板（如果您将使用下划线尝试它，它将起作用如预期的那样。）

示例：

如果您使用Handlebars作为模板：

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

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

    var yourTemplate;

    if (Handlebars.templates && Handlebars.templates[yourTemplateId]) {
        // from cache
        yourTemplate = Handlebars.templates[yourTemplateId];
    } else {
        // load it here
    }
    return yourTemplate;
};

所以只需重写这些方法就可以了！