如何在 Marionettejs 中呈现根布局？答案

【问题标题】：How to render root layout in Marionettejs?如何在 Marionettejs 中呈现根布局？
【发布时间】：2016-07-10 12:04:42
【问题描述】：

基于此fact，应用程序中的区域已弃用。你如何渲染根布局？简单地说，新的 RootLayout() 不会呈现布局视图。我知道调用区域 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();

});

【问题讨论】：

标签： javascript backbone.js marionette

【解决方案1】：

可以这么简单

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

【讨论】：

【解决方案2】：

在 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

【讨论】：

【解决方案3】：

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

var App = new Marionette.Application();

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

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

App.start();

【讨论】：