https://github.com/ericgj/multi-view

Multiple-state views controller. Lets you define multiple reactive views and easily transition between them.
https://github.com/ericgj/multi-view

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ericgj/multi-view
• Owner: ericgj
• Created: 2013-06-30T15:40:01.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-07-02T19:10:24.000Z (over 11 years ago)
• Last Synced: 2023-03-11T07:13:10.836Z (almost 2 years ago)
• Language: JavaScript
• Homepage:
• Size: 121 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# multi-view

  Multiple-state views controller.  Lets you define multiple reactive

  views and easily transition between them.

## Installation

    $ component install ericgj/multi-view

## Motivation

  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.

  

## API

### MultiView( rootEl:String|Element )

  Constructor; specify root element which templates are appended under.

### MultiView#mode( name:String, view:Function )

  Define mode with given name and view class

### MultiView#render( model:Object, mode:String )

  Transition to given mode, building view with given model and swapping in

  the built element into the DOM.

### MultiView#transitioned( className:String )

  Element class name which is added after elements are swapped in; used

  for CSS transitions.

## Events

Two events are emitted after mode transitions:

### 'change', lastMode, mode

### mode, lastMode

## Notes

### Assumptions about Views

  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.

  

### How to transition between views from within your views

  Your handler should emit the name of the mode you want to transition to.

  For instance with a template like:

  

  ```html

    Go to special mode

  ```

  in your view:

  ```javascript

    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.

  

## License

  MIT