Multiple-state views controller. Lets you define multiple reactive views and easily transition between them.

$ component install ericgj/multi-view

You have multiple views of a given model, which can't easily be captured by a single template and styling, and you want to swap them out in the same place on the page. Also, you want to be able to transition between them based on user events within any of the views.

This library encapsulates that kind of behavior and provides an alternative to managing 'view mode' externally between two or more template/views.

I put scare-quotes around view mode because of course no one wants modal interfaces if we can help it. My hope is that the baggage associated with the term 'modal' will eventually fade away with the amazing UI possibilities we have now, where modes and mode transitions do not have to be invisible to the user nor force the user into a synchronous response.

Constructor; specify root element which templates are appended under.

Define mode with given name and view class

Transition to given mode, building view with given model and swapping in the built element into the DOM.

Element class name which is added after elements are swapped in; used for CSS transitions.

Two events are emitted after mode transitions:

Your view constructors should take a single argument: the model. The views themselves are responsible for setting and "reactifying" a template, etc. Any other state that your view needs should be set externally, not in the constructor.

Your handler should emit the name of the mode you want to transition to. For instance with a template like:

  <button on-click="special">Go to special mode</button>

in your view:

  MyView.prototype = new Emitter;
  MyView.prototype.special = function(){
    this.emit('special');
  }

MultiView handles the rest of the mechanics of the transition.

If you don't need to transition within your views, your views do not have to inherit Emitter methods.

MIT