human-view-switcher
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 .el
, .render
and .remove()
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
remove
on it. - 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
.el
property 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)
installing
npm install human-view-switcher
example usage
Here's an example of how you might use the view switcher to handle page views within your humanjs app.
mainview.js
var HumanView = ;var templates = ; moduleexports = HumanView;
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 show waitForRemove: 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. viewelclassList; // give it time to finish (yes there are other ways to do this) ; } // 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 me documenttitle = newViewpageTitle || 'app name'; documentbodyscrollTop = 0; // store an additional reference, just because appcurrentPage = newView; viewelclassList; };
Changelog
- 0.0.1 Initial version (prototype stage, beware)
Credits
Written by @HenrikJoreteg with inspiration and ideas from @philip_roberts and @wraithgar and other awesome Yetis.
License
MIT