我试图让我的小木偶视图与应用程序区域和布局相结合,但是我似乎无法在布局中获取嵌套的视图来呈现.
编辑：我预计在NavigationLayout中渲染OptionsView和BreadcrumbsView,它应该在导航区域中呈现.但是,导航区域根本没有渲染.控制台不显示任何错误.
我的结构如下：
- Navigation region
- Navigation layout
- Options region
- Breadcrumbs region
- Content region
将ItemView分配给导航区域将按预期方式工作.
App = new Backbone.Marionette.Application();
App.addRegions({
'nav': '#nav','content': '#content'
});
var NavigationLayout = Backbone.Marionette.Layout.extend({
template: '#nav-template',regions: {
'breadcrumbs': '#breadcrumbs','options': '#options'
}
});
var BreadcrumbsView = Backbone.Marionette.ItemView.extend({
template: '#breadcrumbs-template'
});
var OptionsView = Backbone.Marionette.ItemView.extend({
template: '#options-template'
});
var ContentView = Backbone.Marionette.ItemView.extend({
template: '#content-template'
});
App.addInitializer(function(options) {
var navigationLayout = new NavigationLayout();
App.nav.show(navigationLayout);
App.content.show(new ContentView());
navigationLayout.breadcrumbs.show(new BreadcrumbsView());
navigationLayout.options.show(new OptionsView());
});
$(function() {
App.start();
});
可以找到减少的测试用例here
解决方法
好的,终于找到了问题：您不能在布局中命名区域选项.
布局中定义的所有区域都直接附加到布局实例.所以,这样定义的区域：
Layout.extend({
regions: {
options: "#options"
}
});
最后将layoutInstance.options设置为Region实例.这是一个问题,因为Backbone.View定义并使用其他用途的选项.
将该区域重命名为任何现有视图所使用的现有关键字或属性以外的任何内容将会解决此问题.
Layout.extend({
regions: {
optionRegion: "#options"
}
});
工作JSFiddle在这里：http://jsfiddle.net/tegon/64ovLf64/
