backbone-named-routes
Version:
Backbone router implementation with named routes (aliases) for easy client side links generation
55 lines (45 loc) • 21.9 kB
HTML
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Backbone named routes</title><meta name="description" content="Backbone router implementation with named routes (aliases) for easy client side links generation"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="canonical" href="http://dbrekalo.github.io/backbone-named-routes/"><style>/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}code[class*="language-"],pre[class*="language-"]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none}}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#f5f2f0}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}@font-face{font-family:'Lato';font-style:normal;font-weight:300;src:url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-300-normal.eot);src:local("Lato Light"),local("Lato-Light"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-300-normal.woff2) format("woff"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-300-normal.woff) format("woff"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-300-normal.ttf) format("truetype"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-300-normal.svg#Lato) format("svg")}@font-face{font-family:'Lato';font-style:normal;font-weight:400;src:url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-400-normal.eot);src:local("Lato Regular"),local("Lato-Regular"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-400-normal.woff2) format("woff"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-400-normal.woff) format("woff"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-400-normal.ttf) format("truetype"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-400-normal.svg#Lato) format("svg")}@font-face{font-family:'Lato';font-style:normal;font-weight:700;src:url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-700-normal.eot);src:local("Lato Bold"),local("Lato-Bold"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-700-normal.woff2) format("woff"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-700-normal.woff) format("woff"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-700-normal.ttf) format("truetype"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-700-normal.svg#Lato) format("svg")}@font-face{font-family:'Lato';font-style:normal;font-weight:900;src:url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-900-normal.eot);src:local("Lato Black"),local("Lato-Black"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-900-normal.woff2) format("woff"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-900-normal.woff) format("woff"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-900-normal.ttf) format("truetype"),url(https://rawgit.com/dbrekalo/attire/master/dist/fonts/lato-900-normal.svg#Lato) format("svg")}a{text-decoration:none;cursor:pointer;color:inherit}a:focus,a::-moz-focus-inner{outline:none}ol,ul,li,h1,h2,h3,h4,p,a,td,dl,dt,dd,fieldset{margin:0;padding:0;list-style:none;border:0;font-size:1em}table{border-collapse:collapse;border-spacing:0}img{vertical-align:bottom}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;outline:none;box-sizing:border-box;border-radius:0}textarea{overflow:auto;vertical-align:top;resize:vertical}label,button{cursor:pointer}html{font-size:62.5%}body{font-size:1em}@font-face{font-family:"attire";src:url("https://rawgit.com/dbrekalo/attire/master/dist/fonts/attireIcons.eot?v1.0");src:url("https://rawgit.com/dbrekalo/attire/master/dist/fonts/attireIcons.eot?v1.0#iefix") format("embedded-opentype"),url("https://rawgit.com/dbrekalo/attire/master/dist/fonts/attireIcons.woff?v1.0") format("woff"),url("https://rawgit.com/dbrekalo/attire/master/dist/fonts/attireIcons.ttf?v1.0") format("truetype"),url("https://rawgit.com/dbrekalo/attire/master/dist/fonts/attireIcons.svg?v1.0https://rawgit.com/dbrekalo/attire/master/dist/fonts/attireIcons") format("svg");font-weight:normal;font-style:normal}[class^="icon"],[class*=" icon"]{display:inline-block;position:relative;padding-left:40px}[class^="icon"]:before,[class*=" icon"]:before{font-family:"attire";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;left:0;top:50%;margin:0;width:40px;height:40px;line-height:40px;margin-top:-20px;text-align:center;text-indent:0}.iconMenu:before{content:""}.iconArrowRight:before{content:""}.iconMail:before{content:""}.iconFacebook:before{content:""}.iconGithub:before{content:""}.iconTwitter:before{content:""}.iconCode:before{content:""}html,body{min-height:100%;background:#fff}a{color:#2B91F5}body{font-family:Lato, Arial, sans-serif;font-weight:400;font-style:normal;font-size:1em;min-width:32em;position:relative;color:#303030}@-webkit-keyframes attireNavEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@-moz-keyframes attireNavEnter{from{opacity:0;-moz-transform:translate3d(0, -1em, 0)}to{opacity:1;-moz-transform:translate3d(0, 0, 0)}}@keyframes attireNavEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0);-moz-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);-o-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.attireMainNav{position:relative;margin-bottom:-1em;z-index:10;background-color:#fff}.attireMainNav>.toggleBtn{margin:0;padding:0;border:0;cursor:pointer;background:none;padding:0;display:inline-block;width:60px;height:60px;text-indent:-9999em;overflow:hidden}.attireMainNav>.toggleBtn::-moz-focus-inner{padding:0;border:0}.attireMainNav>.toggleBtn:before{right:0;width:auto;text-indent:0}.attireMainNav>.toggleBtn:before{font-size:2.6em;width:2.30769em}.attireMainNav>ul{padding:0 0 1em;display:none}.attireMainNav.isActive{margin-bottom:0}.attireMainNav.isActive>ul{-webkit-animation:attireNavEnter 0.3s;-moz-animation:attireNavEnter 0.3s;animation:attireNavEnter 0.3s;display:block}.attireMainNav a{font-size:1.4em;display:block;padding:1.07143em 1.42857em;color:#636363;letter-spacing:0.07em;text-transform:uppercase}.attireMainNav a:hover{color:#2B91F5}@media screen and (min-width: 45.0625em){.attireMainNav{margin-bottom:0}.attireMainNav>.toggleBtn{display:none}.attireMainNav>ul{display:block;overflow:hidden;padding:0 1.5em}.attireMainNav li{float:left}.attireMainNav a{font-size:1.4em;display:block;padding:1.42857em 1.07143em}}.githubRibbon{position:absolute;right:0;top:0;width:10em;z-index:20}.githubRibbon>img{display:block;width:100%}@media screen and (min-width: 45.0625em){.githubRibbon{width:14.9em}}.attireBlock{background-color:#fff;position:relative;border-top:1px solid #e3e3e3}.attireBlock:first-child{border-top:0}.attireBlock>.inner{padding:2em}.attireBlock.mod1{background-color:#FBFBFB}@media screen and (min-width: 45.0625em){.attireBlock>.inner{max-width:70em;padding:6em 2.5em;margin:0 auto}}.attireSeparator{margin:2.5em 0;position:relative;border:0;border-top:1px solid #e3e3e3}.attireSeparator.mod1{margin:3.5em 0;width:10em}.attireSeparator.mod2{margin:6em 0;width:10em;border-top:5px solid #636363}.attireFooter{padding:2em;border-top:1px solid #e3e3e3}.attireFooter>p{font-family:Lato, Arial, sans-serif;font-weight:300;font-style:normal;font-size:1.5em}.attireAuthor{position:relative;margin-bottom:3em}.attireAuthor>.imageElement{display:inline-block;overflow:hidden;vertical-align:middle;width:4em;height:4em;position:relative;border-radius:50%;border-radius:50%}.attireAuthor>.imageElement>img{display:block;width:100%}.attireAuthor>.name{font-family:Lato, Arial, sans-serif;font-weight:700;font-style:normal;font-size:1.3em;display:inline-block;vertical-align:middle;position:relative;text-transform:uppercase;letter-spacing:0.1em;padding:0 1em;background-color:#fff;color:#303030}.attireAuthor>.name:first-child{padding-left:0}@media screen and (max-width: 45em){.attireAuthor>.socialBox{position:relative;padding:1em 0 0;margin-top:0.5em}.attireAuthor>.socialBox a{font-size:1.4em;display:block;padding:.57143em .35714em .57143em 3.92857em;color:#707070}.attireAuthor>.socialBox a:before{font-size:1.3em}.attireAuthor>.socialBox:before{content:"";position:absolute;left:5.5em;top:0;right:0;border-top:1px solid #e3e3e3}}@media screen and (min-width: 45.0625em){.attireAuthor{margin-bottom:5em}.attireAuthor.noImage{margin-top:4em}.attireAuthor>.imageElement{width:5em;height:5em}.attireAuthor>.socialBox{position:absolute;right:0;top:50%;margin-top:-2em;background-color:#fff;padding:0 2em 0 1em}.attireAuthor>.socialBox a{padding:0;display:inline-block;width:40px;height:40px;text-indent:-9999em;overflow:hidden}.attireAuthor>.socialBox a:before{right:0;width:auto;text-indent:0}.attireAuthor>.socialBox a:before{font-size:2em;color:#636363}.attireAuthor>.socialBox a:hover:before{color:#2B91F5}.attireAuthor:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid #e3e3e3}}.attireTitleType1{font-family:Lato, Arial, sans-serif;font-weight:900;font-style:normal;font-size:4em;padding:0;margin:0;word-wrap:break-word}@media screen and (min-width: 45.0625em){.attireTitleType1{font-size:6em}}.attireTitleType1+.attireTextType2{margin-top:1.5625em}.attireTitleType2{font-family:Lato, Arial, sans-serif;font-weight:900;font-style:normal;font-size:3.8em;padding:0;margin:0 0 .55556em;word-wrap:break-word}.attireTitleType3{font-family:Lato, Arial, sans-serif;font-weight:700;font-style:normal;font-size:2.2em;padding:0;margin:0 0 .68182em;word-wrap:break-word}.attireTextType1{font-family:Lato, Arial, sans-serif;font-weight:300;font-style:normal;font-size:2.2em;padding:0;margin:.90909em 0 .90909em;color:#707070;line-height:1.4}@media screen and (min-width: 45.0625em){.attireTextType1{font-size:2.8em;margin:.71429em 0 1.07143em}}.attireTextType2{font-size:1.8em;padding:0;margin:0 0 1.25em;color:#636363;line-height:1.6}.attireTextType3{font-size:1.6em;padding:0;margin:0 0 1.25em;color:#636363;line-height:1.6}.attireListType1>li{font-size:1.8em;padding-left:1.66667em;margin:.55556em 0;position:relative;color:#636363;line-height:1.6}.attireListType1>li:before{content:"—";position:absolute;left:0;top:0em}.attireTextButtonType1{margin:0;padding:0;border:0;cursor:pointer;background:none;color:#2B91F5}.attireTextButtonType1::-moz-focus-inner{padding:0;border:0}.attireCodeHighlight[class*="language-"]{margin:2em 0}.attireCodeHighlight>code{font-size:1.4em}.attireCodeToggleBlock .attireCodeHighlight{display:none}.attireCodeToggleBlock.isActive .attireCodeHighlight{display:block}.attireCodeToggleBtn{margin:0;padding:0;border:0;cursor:pointer;background:none;padding:0 1.2em 0 0;color:#2B91F5}.attireCodeToggleBtn::-moz-focus-inner{padding:0;border:0}.attireCodeToggleBtn:before{left:auto;right:0;text-align:right}.attireUserRepositories{padding:2em;background-color:#FBFBFB;border-top:1px solid #e3e3e3}.attireUserRepositories>.loader{font-family:Lato, Arial, sans-serif;font-weight:300;font-style:normal;font-size:1.6em;padding:1.25em 0;text-align:center;color:#707070}.attireUserRepositories>.title{font-family:Lato, Arial, sans-serif;font-weight:300;font-style:normal;font-size:1.5em;padding-bottom:1.33333em;color:#707070}.attireUserRepositories>ul>li{padding:2em 0;position:relative}.attireUserRepositories>ul>li:last-child{padding-bottom:0}.attireUserRepositories>ul>li:before{content:"";position:absolute;left:0;top:0;width:3em;border-top:1px solid #e3e3e3}@media screen and (min-width: 45.0625em){.attireUserRepositories>.title{text-align:center;position:relative;padding:.33333em 0 1.66667em}.attireUserRepositories>.title:before{content:"";position:absolute;top:100%;left:50%;width:3.33333em;margin-left:-1.66667em;border-top:1px solid #e3e3e3}.attireUserRepositories>ul{max-width:110em;margin:0 auto;overflow:hidden}.attireUserRepositories>ul>li{float:left;width:33.33333%;box-sizing:border-box;padding:3em 4em 4em}.attireUserRepositories>ul>li:before{display:none}}.attireUserRepo{display:block}.attireUserRepo>.title{font-family:Lato, Arial, sans-serif;font-weight:700;font-style:normal;font-size:2.4em;margin-bottom:.75em;color:#303030}.attireUserRepo>.description{font-size:1.6em;line-height:1.6;color:#636363}</style></head><body><nav class="attireMainNav"><button class="toggleBtn iconMenu" type="button">Toggle navigation</button><ul><li><a href="#section-backbone-named-routes">About</a></li><li><a href="#section-examples-and-api">Examples and api</a></li><li><a href="#section-installation">Installation</a></li></ul></nav><section id="section-backbone-named-routes" class="attireBlock"><div class="inner"><h1 id="backbone-named-routes" class="attireTitleType1">Backbone named routes</h1><p class="attireTextType1">Backbone router extension with named routes for easy client side links generation. Keep your url logic in one place and never type urls by hand again. Weighs less than 2KB.</p><nav class="attireAuthor withImage"><a class="imageElement" href="https://github.com/dbrekalo"><img src="https://s.gravatar.com/avatar/32754a476fb3db1c5a1f9ad80c65d89d?s=80" alt="Damir Brekalo"> </a><a class="name" href="https://github.com/dbrekalo">Damir Brekalo</a><p class="socialBox"><a href="mailto:dbrekalo@gmail.com" class="iconMail" title="Contact me by email">Contact me by email</a> <a href="https://github.com/dbrekalo" class="iconGithub" title="Find me on Github">Find me on Github</a> <a href="https://twitter.com/dbrekalo" class="iconTwitter" title="Reach me on Twitter">Reach me on Twitter</a></p></nav><p class="attireTextType2">Tired of hand coding those pesky href attributes on anchors and having to go through all templates when urls are changed? This named router extension allows you to generate urls from named routes or route aliases. Your url structure is already written and defined in your standard Backbone router - it is a good place to generate urls from.</p></div></section><section id="section-examples-and-api" class="attireBlock"><div class="inner"><h2 id="examples-and-api" class="attireTitleType2">Examples and api</h2><p class="attireTextType2">Extend named router and define your routes as you usually do:</p><pre class="attireCodeHighlight"><code class="lang-js">var Router = BackboneNamedRouter.extend({
routes: {
'': 'home',
'help': 'help',
'search/:query': 'search',
'search/:query/p:page': 'searchOnPage',
'file/*path': 'downloadFile',
'docs/:section(/:subsection)': 'docs'
},
...
</code></pre><p class="attireTextType2">Create router instance:</p><pre class="attireCodeHighlight"><code class="lang-js">var router = new Router({
baseUrl: 'http://mysite.loc',
usesPushState: true,
root: ''
});
</code></pre><p class="attireTextType2">Get urls where and when you need them.</p><pre class="attireCodeHighlight"><code class="lang-js">// outputs: 'http://mysite.loc'
router.url('home');
// outputs: 'http://mysite.loc/help'
router.url('help');
// outputs: 'http://mysite.loc/search/my-query'
router.url('search', {query: 'my-query'});
// outputs: 'http://mysite.loc/search/my-query/p2'
router.url('searchOnPage', {query: 'my-query', page: 2});
// outputs: 'http://mysite.loc/file/myFile.pdf?campaign=email'
router.url('downloadFile', {path: 'myFile.pdf'}, {campaign: 'email'});
// outputs: 'http://mysite.loc/docs/backbone/router'
router.url('docs', {section: 'backbone', subsection: 'router'});
</code></pre><p class="attireTextType2">Start Backbone history</p><pre class="attireCodeHighlight"><code class="lang-js">Backbone.history.start(router.getHistoryStartParams());
</code></pre><hr class="attireSeparator mod1"><h3 id="convenient-helpers" class="attireTitleType3">Convenient helpers</h3><p class="attireTextType2">Navigating to named routes is easy as:</p><pre class="attireCodeHighlight"><code class="lang-js">// http://mysite.loc/help
router.navigateToRoute('help')
// http://mysite.loc/search/backbone
router.navigateToRoute('search', {query: backbone});
</code></pre><p class="attireTextType2">Navigating to urls:</p><pre class="attireCodeHighlight"><code class="lang-js">// help route handler is dispatched
router.navigateToUrl('http://mysite.loc/help');
// you can pass jquery anchor objects
$('a.appLink').on('click', function(e) {
e.preventDefault();
router.navigateToUrl($(e.currentTarget));
});
</code></pre></div></section><section id="section-installation" class="attireBlock"><div class="inner"><h2 id="installation" class="attireTitleType2">Installation</h2><p class="attireTextType2">Backbone named routes is packaged as UMD library so you can use it in CommonJS and AMD environment or with browser globals.</p><pre class="attireCodeHighlight"><code class="lang-bash">npm install backbone-named-routes --save
</code></pre><pre class="attireCodeHighlight"><code class="lang-js">// with bundlers
var BackboneNamedRouter = require('backbone-named-routes');
// with browser globals
var BackboneNamedRouter = window.BackboneNamedRouter;
</code></pre></div></section><section class="attireUserRepositories" data-only-with-pages="true" data-user="dbrekalo"></section><a class="githubRibbon" href="https://github.com/dbrekalo/backbone-named-routes"><img src="https://rawgit.com/dbrekalo/attire/master/dist/images/githubRibbon.png" alt="Fork me on GitHub"></a><footer class="attireFooter"><p>This page is built with <a href="http://dbrekalo.github.io/attire/">Attire</a>.</p></footer><script src="https://rawgit.com/dbrekalo/attire/master/dist/js/build.min.js"></script></body></html>