在木偶布局中维护一堆木偶ItemView [英] Maintain a stack of Marionette ItemViews within a Marionette Layout

问题描述

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

人偶行为

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

我的场景。

假设我有一种导航机制，其中 Layout 充当控制器，并首先显示一个名为A的 ItemView ，然后点击某处就可以切换到 ItemView B.此时，B上的操作（例如点击后退按钮）允许返回到A 而不重新创建它。

如何实现前一个场景而又不创建A 和来维护其状态？

iOS人员，我想模仿一种 UINavigationController 。

任何建议？

编辑

我的目标是在不创建状态的情况下恢复其状态的prev缓存视图再次。

我的情况如下。我有两个区域的布局：A b $ b b b我在A内点击某处，A和B关闭以显示C和D.现在，后退单击可以恢复A和B的状态。事件，模型等等，但是由于视图是关闭的，事件被删除。

解决方案

使用骨干路由器来监听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（{
 
地区：{
 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]）; 
 
 //你可能想在这里做一些其他的事情
 / /比如调用delegateEvents继续监听
 //到模型或集合等。当前视图
 //将被关闭，但不会被垃圾收集
 //因为它被附加到这个布局。
} 
}）; 
  

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

每当用户做某些事情需要更改视图时，您可以使用 router.navigate（'my / route / itemViewB '，{trigger：true}）; 。此外，如果您将应用设置为只在历史更改事件上呈现，则不需要设置两种机制来销毁每个视图。

我在自己的应用中使用这种模式，效果很好。

I would like to know if it possible to extend in some way the mechanism Marionette Layouts are based on creating a sort of stack like navigation.

Marionette behaviour.

Before a region show()'s a view it calls close() on the currently displayed view. close() acts as the view's destructor, unbinding all events, rendering it useless and allowing the garbage collector to dispose of it.

My scenario.

Suppose I have a sort of navigation mechanism where a Layout acts as controller and first displays an ItemView called A, then a click somewhere allows to switch to ItemView B. At this point, an action on B (like for example a tap on a back button) allows to return to A without recreating it.

How is it possible to achieve the previous scenario without creating again A and maintaning its state?

For iOS people, I would like to mimic a sort of UINavigationController.

Any advice?

EDIT

My goal is to restore a prev cached view with its state without creating it again.

My scenario is the following. I have a layout with two regions: A e B. I do a click somehere within A and A and B are closed to show C and D. Now a back click would restore A and B with their states. Events, models, etc...but since views are closed events are removed.

解决方案

Use a backbone router to listen to URL change events. Setup routes for each of your views and then have the router call the layout to change the view it's displaying in response to each route. The user could click back or forward any number of times and the app responds accordingly and displays the correct view. Your router might look like:

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

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

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

Your layout might look something like this:

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

The method of communication between the router and the layout doesn't have to be a direct call. You could trigger further application-wide events or do anything else you can think of. The router above is very basic but gets the job done. You could create a more intelligent router to use a single route with parameters to determine dynamically which itemView to show.

Every time the user does something that requires changing views, you can update the browser's history by using router.navigate('my/route/itemViewB', {trigger: true});. Also, if you set up your app to only render on history change events then you don't need to set up two mechanisms for rending each view.

I use this pattern in my own apps and it works very well.

这篇关于在木偶布局中维护一堆木偶ItemView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！