1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<meta name="readability-verification" content="QaMWXDtxjtrFwfPQ2an55eWRMRLr7F2ermV5E9ch"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>What is a router? - Backbone.js Tutorials</title>
<link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml">
<meta name="author" content="Backbone Tutorials" />
<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/reset.css" type="text/css" />
<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css" type="text/css" />
<!-- github ribbon CSS -->
<link rel="stylesheet" href="/css/ribbon.css" type="text/css" />
<!-- Homepage CSS -->
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" />
<!-- Homepage CSS -->
<link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" />
<!-- Typekit -->
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style>
.container {
width: 760px;
margin: auto;
}
.menu {
margin-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
.menu a {
margin-right: 10px;
}
p {
width: 720px;
margin: auto;
}
.FlattrButton {
position: absolute;
top: 15px;
right: 15px;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */
</script>
</head>
<body>
<div class="left ribbon-holder">
<a href="https://github.com/thomasdavis/backbonetutorials" class="red ribbon">
<span class="text">Fork on GitHub</span>
</a>
</div>
<a class="FlattrButton" style="display:none;" href="http://backbonetutorials.com/"></a>
<noscript><a href="http://flattr.com/thing/176986/Backbone-js-Tutorials" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
<div class="container">
<div class="menu">
<a href="/">home</a>
<a href="/examples.html">examples</a>
<!-- <a href="/contribute.html">contribute</a>-->
<a href="/about.html">about</a>
<a href="http://feeds.feedburner.com/BackboneTutorials">subscribe</a>
<a style="margin-left: 320px;" href="http://pledgie.com/campaigns/16174"><strong>donate</strong></a>
</div>
<div class="stack">
<div class="stackContent">
<h1>Backbone Tutorials</h1>
<p class="homepagedescription">This site is by no means the definitive guide to backbone.js and all corrections and contributions are welcome.</p>
<a style="margin-left: 20px;" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<hr>
<div id="post">
<h2>What is a router?</h2>
<p>Backbone routers are used for routing your applications URL’s when using hash tags(#). In the traditional <span class="caps">MVC</span> sense they don’t neccesarily fit the semantics and if you have read “<a href="http://backbonetutorials.com/what-is-a-view">What is a view?</a>” it will elaborate on this point. Though a Backbone “router” is still very useful for any application/feature that needs <span class="caps">URL</span> routing/history capabilities.</p>
<p>Defined routers should always contain at least one route and a function to map the particular route to. In the example below we are going to define a route that is always called.</p>
<p>Also note that routes intepret anything after “#” tag in the url. All links in your application should target “#/action” or “#action”. (Appending a forward slash after the hashtag looks a bit nicer e.g. http://example.com/#/user/help)</p>
<div class="highlight"><pre><code class="html"><span class="nt"><script></span>
<span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">routes</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"*actions"</span><span class="o">:</span> <span class="s2">"defaultRoute"</span> <span class="c1">// matches http://example.com/#anything-here</span>
<span class="p">},</span>
<span class="nx">defaultRoute</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">){</span>
<span class="c1">// The variable passed in matches the variable in the route definition "actions"</span>
<span class="nx">alert</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// Initiate the router</span>
<span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span>
<span class="c1">// Start Backbone history a neccesary step for bookmarkable URL's</span>
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
<span class="nt"></script></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#action"</span><span class="nt">></span>Activate route<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#/route/action"</span><span class="nt">></span>Activate another route<span class="nt"></a></span>
<span class="c"><!-- Notice the change in the url --></span>
</code></pre>
</div>
<p><strong>Please note: * Prior to Backbone 0.5 (released 1. July 2011) a Router was called a Controller. To avoid confusion, the Backbone developers changed the name to Router. Hence, if you find yourself using an older version of Backbone you should write Backbone.Controller.extend({ *</strong> });</p>
<h4>Dynamic Routing</h4>
<p>Most conventional frameworks allow you to define routes that contain a mix of static and dynamic route parameters. For example you might want to retrieve a post with a variable id with a friendly <span class="caps">URL</span> string. Such that your <span class="caps">URL</span> would look like “http://example.com/#/posts/12”. Once this route was activated you would want to access the id given in the <span class="caps">URL</span> string. This example is implemented below.</p>
<div class="highlight"><pre><code class="html"><span class="nt"><script></span>
<span class="kd">var</span> <span class="nx">AppRouter</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">routes</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"/posts/:id"</span><span class="o">:</span> <span class="s2">"getPost"</span><span class="p">,</span>
<span class="s2">"*actions"</span><span class="o">:</span> <span class="s2">"defaultRoute"</span> <span class="c1">// Backbone will try match the route above first</span>
<span class="p">},</span>
<span class="nx">getPost</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">id</span> <span class="p">)</span> <span class="p">{</span>
<span class="c1">// Note the variable in the route definition being passed in here</span>
<span class="nx">alert</span><span class="p">(</span> <span class="s2">"Get post number "</span> <span class="o">+</span> <span class="nx">id</span> <span class="p">);</span>
<span class="p">},</span>
<span class="nx">defaultRoute</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">){</span>
<span class="nx">alert</span><span class="p">(</span> <span class="nx">actions</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="c1">// Instantiate the router</span>
<span class="kd">var</span> <span class="nx">app_router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppRouter</span><span class="p">;</span>
<span class="c1">// Start Backbone history a neccesary step for bookmarkable URL's</span>
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
<span class="nt"></script></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#/posts/120"</span><span class="nt">></span>Post 120<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#/posts/130"</span><span class="nt">></span>Post 130<span class="nt"></a></span>
<span class="c"><!-- Notice the change in the url --></span>
</code></pre>
</div>
<h4>Dynamic Routing Cont. “:params” and “*splats”</h4>
<p>Backbone uses two styles of variables when implementing routes. First there are “:params” which match any <span class="caps">URL</span> components between slashes. Then there are “*splats” which match any number of <span class="caps">URL</span> components. Note that due to the nature of a “*splat” it will always be the last variable in your <span class="caps">URL</span> as it will match any and all components.</p>
<p>Any “*splats” or “:params” in route definitions are passed as arguments (in respective order) to the associated function. A route defined as “/:route/:action” will pass 2 variables (“route” and “action”) to the callback function. (If this is confusing please post a comment and I will try articulate it better)</p>
<p>Here are some examples of using “:params” and “*splats”</p>
<div class="highlight"><pre><code class="javascript"> <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"/posts/:id"</span><span class="o">:</span> <span class="s2">"getPost"</span><span class="p">,</span>
<span class="c1">// <a href="http://example.com/#/posts/121">Example</a></span>
<span class="s2">"/download/*path"</span><span class="o">:</span> <span class="s2">"downloadFile"</span><span class="p">,</span>
<span class="c1">// <a href="http://example.com/#/download/user/images/hey.gif">Download</a></span>
<span class="s2">"/:route/:action"</span><span class="o">:</span> <span class="s2">"loadView"</span><span class="p">,</span>
<span class="c1">// <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a></span>
<span class="p">},</span>
<span class="nx">getPost</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">id</span> <span class="p">){</span>
<span class="nx">alert</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span> <span class="c1">// 121 </span>
<span class="p">},</span>
<span class="nx">downloadFile</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">path</span> <span class="p">){</span>
<span class="nx">alert</span><span class="p">(</span><span class="nx">path</span><span class="p">);</span> <span class="c1">// user/images/hey.gif </span>
<span class="p">},</span>
<span class="nx">loadView</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">route</span><span class="p">,</span> <span class="nx">action</span> <span class="p">){</span>
<span class="nx">alert</span><span class="p">(</span><span class="nx">route</span> <span class="o">+</span> <span class="s2">"_"</span> <span class="o">+</span> <span class="nx">action</span><span class="p">);</span> <span class="c1">// dashboard_graph </span>
<span class="p">}</span>
</code></pre>
</div>
<p>Routes are quite powerful and in an ideal world your application should never contain too many. If you need to implement hash tags with <span class="caps">SEO</span> in mind, do a google search for “google seo hashbangs”.</p>
<p>Remember to do a pull request for any errors you come across.</p>
<h4>Tips and Tricks</h4>
<p>No Tips and Tricks</p>
<h3>Relevant Links</h3>
<ul>
<li><a href="http://documentcloud.github.com/backbone/#Router">Backbone.js official router documentation</a></li>
<li><a href="http://thomasdavis.github.com/2011/02/07/making-a-restful-ajax-app.html">Using routes and understanding the hash tag</a></li>
</ul>
<h3>Author</h3>
<ul>
<li><a href="https://github.com/thomasdavis">Thomas Davis</a></li>
</ul>
<h3>Contributors</h3>
<ul>
<li><a href="http://schistad.info">Herman Schistad</a> (Backbone 0.5 rename from Controller to Router)</li>
<li><a href="http://paulirish.com">Paul Irish</a></li>
</ul>
</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db44541292b653d"></script>
<!-- AddThis Button END -->
<script>
var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
var idcomments_post_id;
var idcomments_post_url = 'http://backbonetutorials.com/what-is-a-router';
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
</div>
</div>
</div>
</div>
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript>
</body>
</html>
|
