PushState URL driven DOM element swapping
PushState URL driven DOM element swapping. A router that uses css selectors to render route templates. For use with Browserify.
Part of the Domy module collection.
npm install domy-router --save
var router = ;var route = ;var someDomElement = document;someDomElementclassName = 'some-element';var anotherDomElement = document;var route1 =;route1;// Generates:// <div id="view-container">// <div class="some-element"></div>// </div>// Nested Routesvar childRoute = route1;childRoute; // navigates to /route1/childRoute// Generates:// <div id="view-container">// <div class="some-element"><div></div></div>// </div>
var router = ;var route = ;var someDomElement = document;var user =;route;
var router = ;var route = ;
The instance is both a function and an object. The function generates a new route. The object performs basic routing actions suchs as:
navigate(path)- navigates to the given path
var router = ;var route = ;route;
Each route will get rendered only once. If the route has been rendered, it simply skips the rendering step, but performs every other route sequence.
path- the name of the route. Used to create nested routes.
options- options to set on the route
url- the url of the route. If it is a nested route, it will be prepended with its parent route
templates- a key/value object list that tells the router to put the given element (value) into the given css selector (key)
key- a css selector (document.querySelector) to put the template in
value- the DOM element to fill the css selector element with (must be a created DOM element)
options, you can have an unlimited amount of callbacks to perform BEFORE the templates get rendered. Each callbcak is passed a context,
ctxobject and a
ctx- contains the parameters if the url has any. You can also use this value to pass values to other callbacks
next- you ust call this callback in order for the callback chain to continue
var router = ;var route = ;var someTemplate = document;someTemplateinnerHTML = 'My Template';var someRoute =);
Nested routes are simple and they give you the ability to render or update only a given set of elements within the parent template. To use nested routes, you simply create a route, then you create a child route from that route:
var router = ;var route = ;var parentRoute =;var childRoute = parentRoute;
If you include the
templates options for the child route, it will not re-render the parent templates, but only the child templates.
A powerful feature of domy-router is it's ability to map dom elements/templates to css selectors. This lets you update any number of areas in the html on route change. It gets even more useful when with nested routes. You can update multiple areas of parent template on route change.
var router = ;var route = ;var usersList = ;var usersOnline = ;var users =;route;
Each route gives you the ability to have any number of callbacks execute before the route renders the templates. THis is useful for authentication, retreiver user information, showing a loader, etc.
var router = ;var route = ;var usersModel = ;var users =;
npm installnpm test