我在 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;
});
我在这里错过了什么吗?任何帮助将不胜感激,谢谢。抱歉我的英语不好。
最佳答案
在您的布局中,尝试将 onRender
函数替换为 onShow
。
关于javascript - Marionette.js 布局仅渲染模板的单个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17739580/