Question

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

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的初始化＆amp;渲染函数不被调用，只调用我的SecondView的初始化和渲染函数。

因此顶栏不会显示，实际上MyView的模板不会出现。只显示SecondView。

我在这里缺少什么？

提前致谢...

Answer 1

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

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

图形：

MainLayout - 托巴尔地区 --SecondBar Region

您可以将MainLayout作为应用程序区域，并使用路由器或任何机制将所需视图加载到SecondBar区域。

希望它有意义。 ;）

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

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

然后将您的onRender代码移至onSecondRender，查看您的子视图。

Answer 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);
    }

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

2 个答案: