繁体   English   中英

Marionette.js仅布局呈现模板的单个元素

[英]Marionette.js Layout Only Render Single Element of template

我遇到了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>

这是我的骨干网布局:

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

我想念这里吗? 任何帮助,将不胜感激,谢谢。 对不起,我英语不好。

在您的布局中,尝试使用onShow重新布置onRender函数。

啊哈哈

已经解决了。

木偶期望模板对象,而不是文本模板。 无论出于何种原因,您都给它一段文本而不是一个对象。 是的,您的代码应该可以工作..但是我们也有同样的问题,并且没有使用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),

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM