在Marionette布局中维护一个Marionette ItemViews堆栈

Question

我想知道是否有可能以某种方式扩展Marionette Layouts基于创建类似于导航的堆栈的机制。

木偶的行为。

在区域show()的视图之前，它在当前显示的视图上调用close()。close()充当view的析构函数，解除所有事件的绑定，使其失效，并允许垃圾收集器处理它。

我的场景。

假设我有一种导航机制，其中Layout充当控制器，首先显示一个名为A的ItemView，然后单击某个位置允许切换到ItemView B。此时，B上的操作(例如，单击后退按钮)允许返回到A，而无需重新创建。

如何在不再次创建和维护其状态的情况下实现前面的场景？

对于iOS用户，我想模仿一种UINavigationController。

有什么建议吗？

编辑

我的目标是恢复带状态的预缓存视图，而不再次创建它。

我的方案如下。我有两个区域的布局:A，B，我在这里点击A，A和B是封闭的，以显示C和D。现在，回击可以恢复A和B的状态。事件、模型、etc...but由于视图是关闭的事件而被移除。

Answer 1

使用主干路由器侦听URL更改事件。为您的每个视图设置路由，然后让路由器调用布局来更改它所显示的视图，以响应每条路由。用户可以单击后退或转发任何次数，应用程序相应地做出响应，并显示正确的视图。您的路由器看起来可能如下：

var Router = Backbone.router.extend({
    routes: {
        'my/route/itemViewA': 'showItemViewA',
        'my/route/itemViewB': 'showItemViewB'
    },

    showItemViewA: function () {
        layout.showItemView('a');
    },

    showItemViewB: function () {
        layout.showItemView('b');
    }
});

您的布局可能如下所示：

var Layout = Backbone.Marionette.Layout.extend({

    regions: {
        someRegion: 'my-region-jquery-selector'
    },

    initialize: function () {
        this.createViews();
    },

    createViews: function () {
        this.views = {
            a: new Backbone.Marionette.ItemView,
            b: new Backbone.Marionette.ItemView
        };
    },

    showItemView: function (view) {
        this.someRegion.show(this.views[view]);

        // You might want to do some other stuff here
        // such as call delegateEvents to keep listening
        // to models or collections etc. The current view
        // will be closed but it won't be garbage collected
        // as it's attached to this layout.
    }
});

路由器和布局之间的通信方法不必是直接呼叫。您可以触发更多的应用程序范围的事件，或者做任何您能想到的事情。上面的路由器是非常基本的，但完成了工作。您可以创建一个更智能的路由器，使用带有参数的单一路由动态确定要显示的itemView。

每次用户进行需要更改视图的操作时，都可以使用router.navigate('my/route/itemViewB', {trigger: true});更新浏览器的历史记录。另外，如果您将应用程序设置为只呈现历史更改事件，则不需要设置两种机制来再现每个视图。

我在我自己的应用程序中使用了这种模式，它运行得非常好。

Answer 2

@Simon的回答是朝着正确的方向发展的。但是，阻止Marionette关闭视图的唯一方法是修改一些它的区域代码。

var NoCloseRegion = Marionette.Region.extend({
    open: function(view) {
        // Preserve the currentView's events/elements
        if (this.currentView) { this.currentView.$el.detach(); } 

        // Append the new view's el
        this.$el.append(view.el);
    }
});

在创建布局视图时，请确保指定我们的新区域类。

var Layout = Backbone.Marionette.Layout.extend({
    regions: {
        someRegion: {
            selector: 'my-region-jquery-selector',
            regionType: NoCloseRegion
        },
    },
    initialize: function () {
        this.createViews();
    },
    createViews: function () {
        this.views = {
            a: new Backbone.Marionette.ItemView,
            b: new Backbone.Marionette.ItemView
        };
    },
    showItemView: function (name) {
        // Don't `show`, because that'll call `close` on the view
        var view = this.views[name];
        this.someRegion.open(view)
        this.someRegion.attachView(view)
    }
});

现在，我们不再调用关闭旧视图、呈现新视图并将其附加到区域(并触发一些事件)的show，我们可以分离旧视图、附加新视图并打开它。