祖先與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); 
    }