木偶LayoutView打消了我的根HTML元素模板 [英] Marionette LayoutView removed my root HTML element in template

问题描述

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

This is my template file 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

This is my 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();

下面是code路由器渲染layoutView：

Here are the code in router to render the layoutView:

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

    }
    }    
});

渲染的结果是：

但结果应该是这样的：

在短词，渲染功能去掉标签，它不是我的目标。我该如何解决？

In short words, the render function removed tag which is not my objective. How can I fix it?

推荐答案

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

Problems comes from Marionette.TemplateCache.loadTemplate and Marionette.TemplateCache.compileTemplate.

你可以从功能注释看你需要，以覆盖它们对用户其他模板，而不是下划线的 _。模板（）。

As you can see from annotations of functions you need to override them in order to user other templates rather than Underscore's _.template().

和从 loadTemplate 的定义，它是负责此行为（你的问题）的实际行是：

And the actual line from definition of loadTemplate which is responsible for this behavior (your issue) is:

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

原因，如果你没有rewrited loadTemplate 和 compileTemplate ，木偶会假设你使用默认的下划线的模板（如果你将与下划线尝试，将工作如预期）。

cause, in case you didn't rewrited loadTemplate and compileTemplate, Marionette will assume that you using default underscore's templates (If you will try it with underscore it will work as expected).

例如：

如果您使用的是把手为模板：

If you using Handlebars for templates:

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

所以才改写这些方法，你准备去！

So just rewrite these methods and you ready to go!

这篇关于木偶LayoutView打消了我的根HTML元素模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！