无法在 Backbone Marionette 中扩展布局视图答案

【问题标题】：Fail to extend a Layout view in Backbone Marionette无法在 Backbone Marionette 中扩展布局视图
【发布时间】：2014-10-17 13:53:57
【问题描述】：

我创建了一个这样的视图：

var MyView = Marionette.LayoutView.extend({
    template: #someTemplate,
    regions: function() {
        return {
            someRegions: '.Regions',
        };
    },

    initialize: function(options) {
        if (options) {
            do stuff...
        }
    },

    onRender: function() {
        var titleBar = new Bar({ options: "options" });
        this.barRegion.show(titleBar);
    }
});

这基本上是一个顶部栏和一些按钮的视图。

现在，我需要创建一大堆具有相同顶栏的不同视图，因此我希望能够执行以下操作：

var SecondView = MyView.extend({

    template: #template,

    onRender: function() {
        create content below top bar here...
    }
});

当我添加断点时，我看到 MyView 的初始化和渲染函数没有被调用，只有我的 SecondView 的初始化和渲染函数被调用。

所以顶栏没有出现，其实MyView的模板也没有出现。只有 SecondView 出现。

我在这里错过了什么？

提前谢谢...

【问题讨论】：

你不包括所有相关代码吗？我没有看到为 SecondView 定义的任何初始化或渲染方法，所以当您说“只有我的 SecondView 的初始化和渲染函数被调用”时，您是什么意思？

标签： javascript backbone.js marionette

【解决方案1】：

问题是您在第二个视图上的 onRender 方法覆盖了第一个，因此只执行您的 SecondView.onRender 代码。

我认为您在这里采用了错误的方法。创建一个包含公共顶栏的布局，并为下方的视图添加另一个区域。如果该视图是另一个布局就可以了。

图形化：

主布局 --顶栏区域 --SecondBar区域

您可以将 MainLayout 设置为 Application 区域，并使用您的路由器或任何机制将所需的视图加载到 SecondBar 区域中。

希望这是有道理的。 ;)

如果你坚持使用继承，那么从你的 MainView onRender 调用第二个方法，类似于：

onRender: function() {
  var titleBar = new Bar({ options: "options" });
  this.barRegion.show(titleBar);
  //hook for child views
  this.triggerMethod("onSecondRender");
}

然后将您的onRender 代码移动到您的子视图上的onSecondRender。

【讨论】：

【解决方案2】：

感谢所有试图帮助我的人...

因此，对于可能对我正在尝试做的事情感兴趣的人来说，这就是我的工作方式：

从 SecondView 的初始化方法中我不得不调用 MyView 的初始化方法：

initialize: function(options) {

        MyView.prototype.initialize.call(this, options);

    }

然后，我必须从 SecondView 的 onRender 方法调用 MyView 的 onRender 方法：

onRender: function() {

        MyView.prototype.onRender(this);

        // extra content for my SecondView goes here...

        var secondViewContent = new Content();
        this.someRegionInMyView.show(secondViewContent);
    }

【讨论】：