题
我试图让我的Marionette视图与应用程序区域和布局结合使用,但我似乎无法让布局中的嵌套视图呈现。
编辑: 我预计这两个 OptionsView
和 BreadcrumbsView
要呈现在 NavigationLayout
, ,其应在导航区域中呈现。但是,导航区域根本不呈现。控制台不显示任何错误。
我的结构如下:
- 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();
});
可以找到一个简化的测试用例 这里
解决方案
Ok,终于找到问题了:您无法命名区域 options
在一个布局。
布局中定义的所有区域都直接附加到布局实例。所以,像这样定义的区域:
Layout.extend({
regions: {
options: "#options"
}
});
最终设置 layoutInstance.options
到Region实例。这是一个问题,因为骨干。视图定义和使用 options
作其他用途。
将区域重命名为任何现有视图使用的现有关键字或属性以外的任何内容都将解决此问题。
Layout.extend({
regions: {
optionRegion: "#options"
}
});
在这里工作的JSFiddle: http://jsfiddle.net/tegon/64ovLf64/
不隶属于 StackOverflow