Marionette.js 布局仅渲染模板的单个元素答案

【问题标题】：Marionette.js Layout Only Render Single Element of templateMarionette.js 布局仅渲染模板的单个元素
【发布时间】：2013-07-19 06:39:37
【问题描述】：

我遇到了 marionette.js 的一些问题，花了几个小时查看错误源，但我找不到它，我的布局没有正确渲染它的模板，它只是在模板的第一个 div 内渲染元素。

这里是实际的模板，headerlayout.html：

   <div class="header-logo-bg relative" id="header_logo">
        <a href="/" title="Apps Title">
            <div class="logo"></div>
        </a>
    </div>

    <div id="home_btn">
        <a href="/">
            <div class="back_to_all_modules">
                Back to<br>
                All Modules
            </div>
        </a>
    </div>


    <div class="header_menu" id="header_menu">

    </div>

但是渲染出来的结果只是这样：

<div>
<a href="/" title="Apps Title">
    <div class="logo"></div>
</a>

这是我的 Backbone 布局：

define([
    'marionette',
    'modules/header/views/menulayout',
    'tpl!modules/header/templates/headerlayout.html'
], function (Marionette, MenuLayout, layoutTemplate) {


    var HeaderLayout = Backbone.Marionette.Layout.extend({
        template: layoutTemplate,

        regions: {
            menuRegion: '#header_menu'
        },
        initialize: function () {
            console.log('initializing header layout');
        },
        onRender: function () {
            console.log('onRender headerlayout');
            var menuLayout = new MenuLayout();
            this.menuRegion.show(menuLayout);
        }
    });

    return HeaderLayout;
});

这是我从主干应用程序调用的标题布局：

define([
    'marionette',
    'modules/header/views/headerlayout'
], function (Marionette, HeaderLayout) {

    // set up the app instance
    var myApp = new Backbone.Marionette.Application();

    // configuration, setting up regions, etc ...
    myApp.addRegions({
        header: '#header',
        content: '#content',
        footer: '#footer',
        dialog: '#dialog'
    });

    myApp.addInitializer(function () {
        var headerLayout = new HeaderLayout();
        myApp.header.show(headerLayout);
    });

    // export the app from this module
    return myApp;
});

我在这里错过了什么吗？任何帮助将不胜感激，谢谢。对不起，我的英语很差。

【问题讨论】：

我看不出你的代码有什么问题，可能是你的模板有问题，可能是奇怪的字符编码？
@Ingro 是的，你是对的，代码没有问题，错误源位于 requirejs 配置文件中。
我们遇到了完全相同的问题....解决方法是什么？

标签： javascript backbone.js requirejs marionette

【解决方案1】：

在您的布局中，尝试将onRender 函数替换为onShow。

【讨论】：

【解决方案2】：

啊哈。

已经解决了。

Marionette 需要一个模板对象，而不是文本模板。无论出于何种原因，您都给它一段文本而不是一个对象。是的，您的代码应该可以工作..但是我们有同样的问题并且没有使用 tpl！我们正在使用文本的功能！

这将起作用：

define(['underscore'
    'marionette',
    'modules/header/views/menulayout',
    'text!modules/header/templates/headerlayout.html'
], function (_,Marionette, MenuLayout, layoutTemplate) {


    var HeaderLayout = Backbone.Marionette.Layout.extend({
        template: _.template(layoutTemplate),

【讨论】：