A utility for swapping out humanjs or backbone views inside an element.
This module does one thing: it helps you swap out views inside of an element. It's compatible with human-view, backbone views and any view that has an
What might you do with it?
- build a page container for your app.
- build a system for managing display of modals in your single page app.
- When you want to animate a transition between showing any two views.
What it does
- Takes an instantiated view and renders it in the container.
- Removes the existing view from the container and calls
- Makes it easy to do custom stuff as views are added and removed.
- Works either synchronously or asynchronously depending on whether you want to animate transitions between the views.
- Makes no assumptions about what your views do or how they're structured except the following:
- Views should have an
.elproperty that is the root element of the view.
- Views should have a
.remove()method that cleans up and unbinds methods accordingly.
- If your view has a
.render()method it will get called before it's shown.
- Beyond this, they could be any object.
- Views should have an
- IT DOES VERY LITTLE ELSE (and that is a feature)
npm install human-view-switcher
Here's an example of how you might use the view switcher to handle page views within your humanjs app.
var HumanView = require'human-view';var templates = require'./templates';moduleexports = HumanViewextendtemplate: templatesbody// render our templatethisrenderAndBind;// grab the element without our template based on its "role" attributethispageContainer = thisgetByRole'page-container';// set up our page switcher for that elementthispageSwitcher = thispageContainer// here we provide a few things we'd like to do each time// we switch pages in the app.// set our document titledocumenttitle = newViewpageTitle || 'my awesome app';// scroll to the topdocumentbodyscrollTop = 0;// perhaps store a reference to our current page on our// app global for easy access from the browser console.appcurrentPage = view;;;
Or if you wanted to animate them you can do it asynchronously like so:
// set up our page switcher for that elementthispageSwitcher = thispageContainer// whether or not to wait for remove to be done before starting showwaitForRemove: true// here we provide a few things to do before the element gets// removed from the DOM.// it's inserted and rendered for me so we'll add a class// that has a corresponding CSS transition.viewelclassListadd'animateOut';// give it time to finish (yes there are other ways to do this)setTimeoutcb 1000;// here we provide a few things we'd like to do each time// we switch pages in the app.// it's inserted and rendered for medocumenttitle = newViewpageTitle || 'app name';documentbodyscrollTop = 0;// store an additional reference, just becauseappcurrentPage = newView;viewelclassListadd'animateIn';setTimeoutcb 2000;
- 0.0.1 Initial version (prototype stage, beware)