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

因此，只需重写这些方法即可开始!