Skip to content

Commit

Permalink
Updates egs
Browse files Browse the repository at this point in the history
  • Loading branch information
@hegdeashwin
hegdeashwin committed Sep 26, 2015
1 parent fad952f commit de14947
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 119 deletions.
57 changes: 15 additions & 42 deletions codes/Ch5_Router/Examples/Example1/Example-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,22 @@
<head>
<meta charset="utf-8">
<title>Example 1: Backbone Router</title>
<style>
body { padding-top: 20px; }
</style>
<link href="../../../css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="hero-unit">
<div class="row">
<h2>Structuring your web apps via Backbone.JS</h2>
</div>
<div class="row">
<h3>Ch 4: Understanding Backbone Router</h3>
</div>
<hr>
<p class="lead">How to run this example.</p>
<ol>
<li>Open Example-1.html in browser.</li>
<li>Press F12, go to console tab.</li>
<li>See the message get displayed on that console tab.</li>
</ol>
</div>
</div>
<div class="row">
<div>
<a href="#">Home</a><br>
<a href="#about">About Us</a><br>
<a href="#search/book/p7">Search [Query='book', Page='7']</a><br>
<a href="#contact">Contact</a><br>
<a href="#page/8">Page 8</a><br>
<a href="#117-a/b/c/open">117-a/b/c</a>
</div>
</div>
<h1>Ch 5: Understanding Backbone Router</h1>
<h2>How to run this example?</h2>
<ol>
<li>Open Example-1.html in browser.</li>
<li>Press F12, go to console tab.</li>
</ol>

<div>
<a href="#">Home</a><br>
<a href="#about">About Us</a><br>
<a href="#search/book/p7">Search [Query='book', Page='7']</a><br>
<a href="#contact">Contact</a><br>
<a href="#page/8">Page 8</a><br>
<a href="#117-a/b/c/open">117-a/b/c</a>
</div>

<!-- Step 1:
Expand All @@ -59,21 +41,12 @@ <h3>Ch 4: Understanding Backbone Router</h3>
<script src="../../../js/underscore-min.js" type="text/javascript"></script>

<!-- Step 3:
Include JSON2, Here the JSON2 is included with in js directory,
Thus the relative path for the file becomes ../../../js/json2.js
IMPORTANT NOTE:
json2.js should always included for JSON support for older browsers.
-->
<script src="../../../js/json2.js" type="text/javascript"></script>

<!-- Step 4:
Include Backbone, Here the Backbone is included with in js directory,
Thus the relative path for the file becomes ../../../js/backbone.js
-->
<script src="../../../js/backbone-min.js" type="text/javascript"></script>

<!-- Step 5:
<!-- Step 4:
Include example-main-1.js, Here the example-main-1.js is included with in js directory,
Thus the relative path for the file becomes example-main-1.js.
Expand Down
108 changes: 47 additions & 61 deletions codes/Ch5_Router/Examples/Example1/example-main-1.js
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,35 @@
(function() {
/*
The goal of this file is to provide the basic understanding
creating a router,
Initialize the router,
Backbone history,
Routes hash,
Simple route,
Route parameters,
Getting currect route
/**
* The goal of this file is to provide the basic understanding of
* 1. Create a Router
* 2. Backbone history
* 3. Routes hash
* 4. Simple route
* 5. Route parameters
* 6. Getting current route
*/

How to run this example.
1. Open Example-1.html in Google Chrome browser.
2. Press F12, go to console tab.
3. See the message get displayed on that console tab.
*/

/*
Creating a new view called MasterRouter by extending Backbone.Router class
*/
var MasterRouter = Backbone.Router.extend({

/*
This initialize function will get called when the router is first created.
*/
/**
* `initialize` is a constructor function which gets called automatically at
* the time of instance creation
*/
initialize: function() {
/*
This message in console.log will get displayed in JavaScript console of browser.
When the page gets loaded.
*/
console.log("Router got initialize");

/*
During page load, after your application has finished creating all of its routers,
be sure to call Backbone.history.start(), or
Backbone.history.start({pushState: true}) to route the initial URL.
*/
Backbone.history.start(); // is same as // Backbone.history.start({pushState: false});

/*
Manually create a route for the router,
The route argument may be a routing string or regular expression.
*/
console.log("Your router have been initialize");

/**
* During page load, after your application has finished creating all of its routers,
* be sure to call Backbone.history.start(), or
* Backbone.history.start({pushState: true}) to route the initial URL.
*/
Backbone.history.start()

/**
* Manually create a route for the router,
* The route argument may be a routing string or regular expression.
*/
// Matches #page/8, passing "8"
this.route("page/:number", function(number){
this.route("page/:number", function(number) {
console.log("Route Callback: Page/{number}");
console.log("Get @param{number}: " + number);
});
Expand All @@ -53,14 +39,14 @@

},

/*
The routes hash maps URLs with parameters to functions on your router
(or just direct function definitions, if you prefer).
*/
/**
* The routes hash maps URLs with parameters to functions on your router
* (or just direct function definitions, if you prefer).
*/
routes: {
"":"home", // #help
"about": "about", // #about
"search/:query/p:page": "search", // #search/book/p7
"": "home", // #help
"about": "about", // #about
"search/:query/p:page": "search", // #search/book/p7
"contact": function() {
console.log("Route Callback: Contact Us");
this.getCurrentRoutes();
Expand All @@ -78,7 +64,7 @@
this.getCurrentRoutes();
},

search: function(query,page) {
search: function(query, page) {
console.log("Route Callback: Search");
console.log(" => Search Query: " + query);
console.log(" => Page No: " + page);
Expand All @@ -88,13 +74,16 @@
console.log("Route Callback: Open (Redirect to Help Callback)");
console.log("Get @param {id}: " + id);

/*
Whenever you reach a point in your application that you'd like to save as a URL,
call navigate in order to update the URL. If you wish to also call the route function,
set the trigger option to true.
To update the URL without creating an entry in the browser's history, set the replace option to true.
*/
this.navigate("help", {trigger: true, replace: true});
/**
* Whenever you reach a point in your application that you'd like to save as a URL,
* call navigate in order to update the URL. If you wish to also call the route function,
* set the trigger option to true.
* To update the URL without creating an entry in the browser's history, set the replace option to true.
*/
this.navigate("help", {
trigger: true,
replace: true
});
},

help: function() {
Expand All @@ -107,9 +96,6 @@
}
});

/*
Creating an object from MasterRouter which calls initialize function.
*/
var masterRouter = new MasterRouter();
new MasterRouter();

})();
})();
24 changes: 8 additions & 16 deletions codes/Ch5_Router/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
Training Session 5 - <br>Understanding Backbone Router
======================================================

This training session includes the following listed out table of contents

<ol>
<li>Understanding Backbone Router
<ol>
<li>What is Backbone Router?</li>
<li>Create a Router class</li>
<li>Adding manual routes</li>
<li>Window navigate</li>
<li>Using routes hash</li>
</ol>
</li>
</ol>
# Ch5 - Understanding Backbone Router

## Example 1:
* Create a Router
* Backbone history
* Routes hash
* Simple route
* Route parameters
* Getting current route

0 comments on commit de14947

Please sign in to comment.