嵌套木偶地区，布局和视图

本文介绍了嵌套木偶地区，布局和视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图让我的木偶观点与应用区域和布局相结合的工作，但我似乎无法获得在布局中嵌套视图来呈现。

I'm trying to get my Marionette views working in combination with application regions and layouts, but I just can't seem to get the nested views in the layout to render.

编辑：我预期这两个 OptionsView 和 BreadcrumbsView 将在渲染 NavigationLayout ，应在导航区域呈现。然而，在导航区域根本没有被渲染。控制台不显示任何错误。

I expected both the OptionsView and BreadcrumbsView to be rendered in the NavigationLayout, which should be rendered in the navigation region. However, the navigation region isn't rendered at all. The console doesn't show any errors.

我的结构如下：

- Navigation region - Navigation layout - Options region - Breadcrumbs region - Content region

分配一个 ItemView控件来导航区域按预期工作。

Assigning an ItemView to the navigation region works as expected.

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

一个降低测试案例可以发现这里

A reduced test case can be found here

推荐答案

好吧，终于发现了问题：你不能说出选项在布局的区域

Ok, finally found the problem: You can't name a region options in a layout.

中的所有布局中定义的区域被直接连接到布局实例。因此，一个区域定义是这样的：

All of the regions that are defined in a Layout are directly attached to the layout instance. So, a region defined like this:

Layout.extend({ regions: { options: "#options" } });

结束的 layoutInstance.options 设置为区域实例。这是一个问题，因为Backbone.View定义并使用选项用于其它目的。

ends up setting the layoutInstance.options to the Region instance. This is a problem because Backbone.View defines and uses the options for other purposes.

重命名该地区比任何现有的视图中使用现有的关键字或属性以外​​的任何其他会解决这个问题。

Renaming the region to anything other than an existing keyword or attribute used by any existing view will fix this.

Layout.extend({ regions: { optionRegion: "#options" } });

工作的jsfiddle在这里： jsfiddle/tegon/64ovLf64/