如何在 Marionettejs 中渲染根布局？

Question

基于此 fact，应用程序中的区域已弃用。你如何渲染根布局？简单地新建 RootLayout() 将不会呈现布局视图。我知道调用 region show() 函数将呈现布局，但由于 Application 对象上没有区域。你如何渲染根布局？

文档中建议使用以下方法，但没有用。

我这样定义根布局：

var RootView = Marionette.LayoutView.extend({
  el: 'body'
});

然后像这样渲染根布局：

var canvasApp = new Marionette.Application();
canvasApp.on('start', function() {
    canvasApp.rootView = new RootLayout();
}
$(document).ready(function(){
    canvasApp.start();

});

Answer 1

定义 LayoutView 内的区域，然后显示所需的视图

var RootView = Marionette.LayoutView.extend({
  el: 'body,
  regions: {
    menu: "#menu",
    content: "#content"
   }
});

RootView.getRegion('menu').show(new MenuView());
RootView.getRegion('content').show(new ContentView());

您可以在此处找到更多信息http://marionettejs.com/docs/marionette.layoutview.html#basic-usage

Answer 2

它可以像

一样简单

var RootView = Marionette.LayoutView.extend();
var rootView = new RootView();
rootView.render().$el.appendTo( document.body ); // or a selector

或

var RootView = Marionette.LayoutView.extend();
var rootView = new RootView({ el: '#app' });
rootView.render();

或者，如您的情况

var RootView = Marionette.LayoutView.extend({
  el: 'body'
});
var rootView = new RootView();
rootView.render(); // just remember to render it

Answer 3

这可能是一个老问题，但我能够像这样解决问题：

var App = new Marionette.Application();

App.addRegions({
  mainRegion: '#app'
});

App.mainRegion.show(new RootView());

App.start();

如何在 Marionettejs 中渲染根布局？

How to render root layout in Marionettejs?

javascript

backbone.js

marionette