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
228
229
230
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<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 -->
<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css" type="text/css" />
<!-- Homepage CSS -->
<link rel="stylesheet" href="//bootswatch.com/sandstone/bootstrap.min.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" />
<link href="https://fonts.googleapis.com/css?family=Arvo:400,700&subset=latin" rel="stylesheet" type="text/css">
<!-- Typekit -->
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div class="row">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Backbone Tutorials</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class=""><a href="/">Tutorials</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li>
<li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">About</h3>
</div>
<div class="panel-body">
<div class="col-lg-4">
<p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p>
<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="col-lg-8">
<h3 >Backbone.js Beginner Video Tutorial</h3>
<img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p>
<a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a>
</div>
</div>
</div>
</div>
<div id="post">
<h1>What is a router?</h1>
<p>Backbone routers are used for routing your applications URL's when using hash tags(#). In the traditional MVC sense they don't necessarily 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 URL 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 interpret 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="language-html" data-lang="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="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="nx">app_router</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'route:defaultRoute'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">actions</span><span class="p">)</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="c1">// Start Backbone history a necessary 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></code></pre></div>
<p><a href="#action">Activate route</a></p>
<p><a href="#/route/action">Activate another route</a></p>
<p><em>Notice the change in the url</em></p>
<h2>Dynamic Routing</h2>
<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 URL string. Such that your URL would look like "http://example.com/#/posts/12". Once this route was activated you would want to access the id given in the URL string. This example is implemented below.</p>
<div class="highlight"><pre><code class="language-html" data-lang="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="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="nx">app_router</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'route:getPost'</span><span class="p">,</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">app_router</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'route:defaultRoute'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">actions</span><span class="p">)</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="c1">// Start Backbone history a necessary 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></code></pre></div>
<p><a href="#/posts/120">Post 120</a></p>
<p><a href="#/posts/130">Post 130</a></p>
<p><em>Notice the change in the url</em></p>
<h2>Dynamic Routing Cont. ":params" and "*splats"</h2>
<p>Backbone uses two styles of variables when implementing routes. First there are ":params" which match any URL components between slashes. Then there are "<em>splats" which match any number of URL components. Note that due to the nature of a "</em>splat" it will always be the last variable in your URL 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="language-javascript" data-lang="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">app_router</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'route:getPost'</span><span class="p">,</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">app_router</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'route:downloadFile'</span><span class="p">,</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">app_router</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'route:loadView'</span><span class="p">,</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 SEO in mind, do a google search for "google seo hashbangs". Also check out <a href="http://seo.apiengine.io">Seo Server</a></p>
<p>Remember to do a pull request for any errors you come across.</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>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>
<hr />
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div style="text-align: center;">
<img src="https://secure.gravatar.com/avatar/cff733cf90823edd218a834980379c61?s=170" class="img-circle" style=" padding:2px; border: 1px solid #ddd; width: 100px;">
<h2>Thomas Davis</h2>
<p>Founder of <a href="http://cdnjs.com">cdnjs.com</a>, <a href="http://jsonresume.org">jsonresume.org</a></p>
<p>Work with Drones, Open Source, Tech Policy, Javascript and Music. </p>
<div class="addthis_horizontal_follow_toolbox" style="padding-left: 33px;"></div>
<br />
<a href="https://github.com/thomasdavis">github.com/thomasdavis</a>
</div>
</div>
</div>
<hr />
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=thomasdavis" async="async"></script>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bbtutes'; // required: replace example with your forum shortname
var disqus_url = 'http://backbonetutorials.com/what-is-a-router';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</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>
|
