marionettejs/backbone.marionette — pull request #323 by derickbailey (2012-10-26 19:21:35+00:00)
Title: Add a ViewSwapper view, to enable swapping views in / out based on events

I build a JSFiddle hack of this a while back ( http://jsfiddle.net/derickbailey/53Uy4/ ), and finally got the time to re-build a real / stable version of it in to Marionette.

The gist of it is that there are a lot of scenarios where a view instance needs to be swapped out for another view, but still displayed in the same place as the previous view. Some common examples of this include display mode vs edit model (see the original fiddle for this), tabs (only show the tab for the current view), a "loading" spinner view, etc.

The idea is that a Swapper view can be configured to allow swapping out different child-views, based on the events that the current view triggers. For example, swapping out add/edit views would look like this:

```js
var AddEditView = new ViewSwapper({
initialView: "displayView",

swapOn: {
"editView": {
"swap:display": "displayView"
},
"displayView": {
"swap:edit": "editView"
}
}
});
```

Then when you create the instance to display the real views, you would specify the views to use in place of the names provides:

```js
var displayView = new SomeView();
var editView = new SomeEditView();

new AddEditView({
views: {
displayView: displayView,
editView: editView
}
});
```

Then when `displayView` triggers the "swap:edit" event, the `editView` will be displayed in place. Similarly, when `editView` triggers the "swap:display" event, the `displayView` will be displayed.

Things to note: the event name can be anything you want. Views are only rendered once. When they are swapped out, I just call `view.$el.hide()` to hide the old one. Then I unhide the view when swapping it back in.

There's not documentation, yet - will do that before merging this in. I just wanted to get some feedback on this to see if there's anything missing, before moving forward any further.