Question

如果使用区域哈希将区域添加到布局视图中，请执行以下操作：

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

您在这些区域中显示的视图可以调用triggerMethod并在其父视图上触发事件。

如果我构建我的区域（例如，在复合视图中甚至是项目视图中），如下所示：

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

调用triggerMethod时没有任何反应。它似乎没有在区域上定义_parent属性。

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

例如，我有一个布局视图＆＃34; A＆＃34;使用复合视图＆＃34; B＆＃34;，以及该复合视图＆＃34; B＆＃34;有一个项目视图＆＃34; C＆＃34;。如果我在项目视图＆＃34; C＆＃34;中使用上面的App.addRegions代码创建了一个区域，我可以设置_parent并显示如下视图：

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

布局视图＆＃34; A＆＃34;触发childEvent，而不是项目视图＆＃34; C＆＃34;，也不是复合视图＆＃34; B＆＃34;。

如果我手动拨打

this.triggerMethod('sameeventname');

在项目视图＆＃34; C＆＃34;上，它将触发复合视图＆＃34; B＆＃34;的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);
  }

Ancestry with App.addRegions

1 个答案: