javascript - 在 Marionette 布局中维护一堆 Marionette ItemView

Question

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

Marionette 行为。

在区域 show() 的 View 之前，它会在当前显示的 View 上调用 close()。 close() 充当 view 的析构函数，取消绑定(bind)所有事件，使其无用并允许垃圾收集器处理它。

我的场景。

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

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

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

有什么建议吗？

编辑

我的目标是恢复上一个缓存 View 及其状态，而无需再次创建它。

我的场景如下。我有一个包含两个区域的布局:A e B。 我在 A 中的某处单击，然后 A 和 B 关闭以显示 C 和 D。现在返回单击将恢复 A 和 B 的状态。事件、模型等...但由于 View 已关闭，事件将被删除。

Answer 1

使用主干路由器来监听 URL 更改事件。为每个 View 设置路由，然后让路由器调用布局来更改它显示的 View 以响应每个路由。用户可以点击后退或前进任意次数，应用程序会做出相应的响应并显示正确的 View 。您的路由器可能看起来像:

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。

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

我在我自己的应用程序中使用了这种模式并且效果很好。