祖先与App.addRegions

Question

如果一个区域添加到使用地区的版图哈希像这样：

regions: { 
     compositeRegion: '@ui.compositeViewDiv', 
     modalRegion:{ 
      regionClass:modal, 
      selector:'.modalRegion' 
     } 
    } 

您在这些区域表现可以拨打triggerMethod和他们的父视图触发一个事件的看法。

如果不是我建我的区域（例如，在一个复合视图，甚至一个项目视图），像这样：当你打电话triggerMethod

App.addRegions({ 
     compositeRegion: '@ui.compositeViewDiv', 
     modalRegion:{ 
      regionClass:modal, 
      selector:'.modalRegion' 
    } 

什么也没有发生。它似乎没有在该区域定义_parent属性。

如果我手动将_parent设置为任何视图，它将触发下一个最高布局视图的方法。

例如，我有一个合成视图“B”的布局视图“A”，并且该合成视图“B”具有项目视图“C”。如果我创建使用上述App.addRegions代码在项目视图“C”的区域中，然后我可以设置_parent并显示像这样的视图：

App.modalRegion._parent = this;  
App.modalRegion.show(new someView()); 

布局视图“A” childEvent被触发时，不项目视图“C”，也不合成视图“B”。

如果我手动调用

this.triggerMethod('sameeventname'); 

在项目视图 “C”，它会触发复合视图 “B” 的childEvent。

任何想法？我需要能够从任何地方使用我的模态区域（将任何牵线木偶视图变成一个jQuery-UI模式）。它在布局视图区域散列中使用时效果很好。但是由于在组合或项目视图中没有区域散列，它可以工作，但不会与其父视图进行通信。

Answer 1

我建议看一看James Kyle的Marionette Wires，特别是在他的示例中，服务用于显示全局组件（如模态和闪烁）的方式。

基本架构是一个应用程序，其中LayoutView包含每个组件的区域。这在初始化时呈现，组件从应用程序传递给区域。

对于一个模式像下面呈现视图应该工作：

//layout-view.js 
import { LayoutView } from 'backbone.marionette'; 

export const BaseLayout = LayoutView.extend({ 
    regions: { 
    modal: '.modal', 
    ... 
    } 
}); 

//app.js 
import { Application } from 'backbone.marionette'; 
import { BaseLayout } from './layout-view'; 

export const App = Application.extend({ 
    initialize(options = {}) { 
    this.layout = new Layout({ 
     el: options.el 
    }); 
    this.layout.render(); 
    } 
}); 

//modal/service.js 
import { Service } from 'backbone.service'; 

const ModalService = Service.extend({ 
    setup(options = {}) { 
    this.container = options.container; 
    }, 

    requests: { 
    show: 'show', 
    hide: 'hide' 
    }, 

    show(view) { 
    this.container.show(view); 
    }, 

    hide() { 
    this.container.empty() 
    } 
}); 

export const modalService = new ModalService(); 

//main.js 
import { App } from './app'; 
import { modalService } from './modal/service'; 

const app = new App({ 
    el: '.root-element' 
}); 

modalService.setup({ 
    container: app.layout.modal 
}); 

.... init other components 


//someComponent/index.js 

import { modalService } from '../modal/service'; 

... 

    showView() { 
    const view = new View(); 
    modalService.request('show', view) 
     .then(doSomething) 
     .catch(err => { 
     console.error(err); 
     }); 
    }, 

    hideView() { 
    modalService.request('hide') 
     .then(doSomething); 
    }