嵌套木偶区域、布局和视图

问题描述

我正在尝试让我的 Marionette 视图与应用程序区域和布局结合使用，但我似乎无法渲染布局中的嵌套视图.

我希望 OptionsView 和 BreadcrumbsView 都在 NavigationLayout 中呈现，这应该是在导航区域中呈现.但是，导航区域根本没有呈现.控制台没有显示任何错误.

我的结构如下:

- 导航区域- 导航布局- 选项区域- 面包屑区域- 内容区域

将 ItemView 分配给导航区域按预期工作.

App = new Backbone.Marionette.Application();App.addRegions({'导航':'#导航'，'内容':'#内容'});var NavigationLayout = Backbone.Marionette.Layout.extend({模板: '#nav-template',地区:{'面包屑':'#面包屑'，'选项':'#options'}});var BreadcrumbsView = Backbone.Marionette.ItemView.extend({模板:'#breadcrumbs-模板'});var OptionsView = Backbone.Marionette.ItemView.extend({模板:'#options-template'});var ContentView = Backbone.Marionette.ItemView.extend({模板:'#内容模板'});App.addInitializer(功能(选项){var navigationLayout = new NavigationLayout();App.nav.show(navigationLayout);App.content.show(new ContentView());navigationLayout.breadcrumbs.show(new BreadcrumbsView());navigationLayout.options.show(new OptionsView());});$(函数(){应用程序开始()；});

可以在此处

找到简化的测试用例

解决方案

好的，终于找到问题了:你不能在布局中命名一个区域options.

在布局中定义的所有区域都直接附加到布局实例.所以，一个区域定义如下:

布局.扩展({地区:{选项:#options"}});

最终将 layoutInstance.options 设置为 Region 实例.这是一个问题，因为 Backbone.View 定义并使用 options 用于其他目的.

将区域重命名为任何现有视图使用的现有关键字或属性以外​​的任何内容都可以解决此问题.

布局.扩展({地区:{选项区域:#options"}});

在这里工作 JSFiddle:http://jsfiddle.net/tegon/64ovLf64/>

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.

Edit: 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.

My structure is as follows:

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

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

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

Working JSFiddle here: http://jsfiddle.net/tegon/64ovLf64/

这篇关于嵌套木偶区域、布局和视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！