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?
What it does
.elproperty that is the root element of the view.
.remove()method that cleans up and unbinds methods accordingly.
.render()method it will get called before it's shown.
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;