Blogs Hub

by AskGif | Aug 29, 2019 | Category :coding

Tutorial for Backbone.js Router Hashing And It's Basic Implementation

Tutorial for Backbone.js Router Hashing And It's Basic Implementation

<p>If you are working with a single page application, then you must adopt backbone.js features and this helps your web project to be more powerful. Backbone.js is basically a lightweight framework that allows you to structure your JavaScript code in Model View Controller. This post I had covered the basic implementation of router and URL hashing techniques.</p> <p>&nbsp;</p> <p>Required Libraries</p> <p>You should follow this script including format, otherwise, AppRouter does not work. underscore.js provides more functions to backbone.js</p> <pre class="language-markup"><code>&lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="underscore.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="backbone.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="router.js"&gt;&lt;/script&gt;</code></pre> <p>&nbsp;</p> <p>router.js</p> <p>Backbone router is used for routing your web application URL's when using hash tags(#) Eg: www.example.com/#home</p> <pre class="language-javascript"><code>var AppRouter = Backbone.Router.extend({ routes: { '': 'home', 'index.html': 'home', ':level': 'blockGrid', // Matches http://example.com/#six 'block/:level/:num': 'blockNum', // Matches http://example.com/#block/six/34 '*actions': 'defaultAction' // Matches http://example.com/#anything-here }, home : function() { //Nothing doing }, blockGrid : function(level){ grid(level); // Calling grid function }, blockNum : function(level,num){ gridNum(level,num); // Calling gridNum function }, });</code></pre> <p>&nbsp;</p> <p>Note: Use uniquer names like blockGrid and grid.</p> <p>&nbsp;</p> <p>JavaScript</p> <p>Sample JavaScipt code for starting backbone library using Jquery document ready. grid and gridNum are simple functions for changing block styles.</p> <pre class="language-javascript"><code>&lt;script type='text/javascript'&gt; $(document).ready(function() { var appRouter = new AppRouter(); // Router initialization Backbone.history.start(); // Backbone start }); // Applying color for grid based on level. function grid(level) { $("td").css("background-color","#f2f2f2"); $("#"+level).css("background-color","#80c8e5"); // Applying color } // Appending URL values into block function gridNum(level,num) { grid(level); // Calling grid function $("#"+level).html(num); // Appending num value } &lt;/script&gt;</code></pre> <p>&nbsp;</p> <p>HTML Code</p> <p>Contains anchor tags with #hash hyperlinks related to router js structure.&nbsp;</p> <pre class="language-markup"><code>//Link Set #:level &lt;a href="#one"&gt;One&lt;/a&gt; &lt;a href="#two"&gt;Two&lt;/a&gt; &lt;a href="#three"&gt;Three&lt;/a&gt; ...... ...... //Link Set #block/:level/:num &lt;a href="#block/one/1"&gt;One&lt;/a&gt; &lt;a href="#block/two/2"&gt;Two&lt;/a&gt; &lt;a href="#block/three/3"&gt;Three&lt;/a&gt; ...... ...... &lt;table&gt; &lt;tr&gt; &lt;td id="one"&gt;1&lt;/td&gt; &lt;td id="two"&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id="three"&gt;3&lt;/td&gt; &lt;td id="four"&gt;4&lt;/td&gt; &lt;/tr&gt; ...... ...... &lt;/table&gt;</code></pre>

read more...