Merge pull request #25 from hegdeashwin/develop

Develop

Author: Ashwin Hegde

README.md

@@ -1,22 +1,22 @@
-# Structuring your web apps via Backbone.JS
+# Structuring your web apps with Backbone.js
 
-This training kit has been developed for those who already have the basic knowledge of JavaScript & jQuery;
-As Backbone.JS is entirely written in JavaScript.
+This training kit has been developed for those who
+* Already have the basic knowledge of JavaScript & jQuery;
+* Who wants to write JavaScript in a structured/pattern way;
 
-This training kit will teach you the basics of Backbone.JS and introduction to advanced part.
+This training kit will teach you the basics of Backbone.js and introduction to advanced part;
 
 ## Prerequisites arranged as per the priority
-
 * JavaScript, jQuery, Underscore.
-* Basic understanding of web scripting.
+* Basic understanding of web development concepts like functional programming, templating etc.
 
 ## Training kit includes below session
-* Ch 0 : Getting Started.
-* Ch 1 : Backbone Model.
-* Ch 2 : Backbone View, Events & Templates.
-* Ch 3 : Backbone Collection.
-* Ch 4 : Backbone Router.
-* Ch 5 : Application DEMO & Plugin examples.
+* Ch 1 : Getting Started.
+* Ch 2 : Backbone Model.
+* Ch 3 : Backbone View, Events & Templates.
+* Ch 4 : Backbone Collection.
+* Ch 5 : Backbone Router.
+* Ch 6 : Application DEMO & Plugin examples.
 
 * For more information on Backbone's coding standards, plugins etc. Please visit <a href="https://github.com/hegdeashwin/Backbone/wiki" target="_blank">Backbone's training kit Github Wiki documentation</a>
 
@@ -62,53 +62,18 @@ as per the priority.
   <dd>An open source enterprise edition of Nebula based upon Backbone + Marionette - A scalable and composite application architecture for Backbone.js. It provides a client-[server]-side stack for building enterprise grade HTML5/Marionette applications. It could be used with any server side like Node.js, Ruby, PHP, JEE, Spring etc. By default it's server side environment comes with Node.js - Loopback (StrongLoop) stack.</dd>
 </dl>
 
-
-## Change Log
-
-<h5>Shows what a particular release does.</h5>
-
-> Release date 2.0.2: from **August 09, 2015**
-```
-  README.MD - Updates.
-  Examples - Re-factor directory structure.
-```
-
-> Release date 2.0.1: from **March 16, 2015**
-```
-  README.MD - Updates.
-```
-
-> Release date 2.0.0: from **September 16, 2013** to **October 10, 2014**
-```
-  README.MD - Updates.
-  Examples - Fixes few examples bugs.
-  Examples - 
-    6.1 Adds local JSON Google Map API file to use as services. 
-    6.2 Removes _.object to native object way.
-  Issues - Updates existing issues list.
-  Wiki - Adds section on "List of useful blogs" on Backbone.
-  Training Session 5 - Adds callback function to get current route in router example.
-  JS - Updates backbone.js to version 1.1.0
-  Training Extended Session -
-    1.1 Adds plugins example.
-    1.2 Adds usage & implementation of Backbone-Deep-Model plugin.
-```
-
 ## Contributors
 
-Developed &amp; maintained by author: <b>Ashwin Hegde</b><br>
+Developed & maintained by author: <b>Ashwin Hegde</b>
 
 We really appreciate all kind of feedback and contributions. Thanks for using and supporting this project: 
 <a href="//github.com/hegdeashwin/Backbone/graphs/contributors" target="_blank">contributors</a>
 
-Visit the following link to know about Backbone current training updates<br>
-Home: <a href="https://github.com/hegdeashwin/Backbone#change-log" target="_blank">https://github.com/hegdeashwin/Backbone#change-log</a>
-
 To request a feature or you find any typo errors, enhancements or questions; please feel free to post it on following link, or vote for the ones that are already registered.
 <br>Tracking: <a href="https://github.com/hegdeashwin/Backbone/issues" target="_blank">https://github.com/hegdeashwin/Backbone/issues</a>
 
 Visit the following link to know about Backbone's development code in detail.<br>
-<strong>Copyright &copy; 2010-2013 Jeremy Ashkenas</strong><br>
+<strong>Copyright & 2010-2013 Jeremy Ashkenas</strong><br>
 Documentation: <a href="http://documentcloud.github.io/backbone/docs/backbone.html" target="_blank">http://documentcloud.github.io/backbone/docs/backbone.html</a>.
 
 ## License

codes/Ch3_View_Events_Templates/README.md

@@ -41,16 +41,6 @@
 * Trigger a subscribed event
 
 ### Example 4:
-*
-*
-*
-
-### Example 5:
-*
-*
-*
-
-### Example 6:
-*
-*
-*
+* New way to Subscribe/Unsubscribe a custom event
+* New way to Subscribe a custom event onces
+* Trigger a subscribed event

codes/Ch4_Collection/Examples/Example1/Example-1.html

@@ -3,31 +3,14 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Example 1: Backbone Collection</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 3: Understanding Backbone Collection</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>
+		<h1>Ch 4: Understanding Backbone Collection</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>
 
 		<!-- Step 1:
 			Include jQuery, Here the jQuery is included with in js directory,
@@ -49,21 +32,12 @@ <h3>Ch 3: Understanding Backbone Collection</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.
 

codes/Ch4_Collection/Examples/Example1/example-main-1.js

@@ -1,138 +1,135 @@
 (function() {
-	/*
-		The goal of this file is to provide the basic understanding
-		1. Create a Collection class.
-		2. Passing Model to Collection.
-		3. Setting build-in Collection events.
-		4. Get Model using at-index.
-		5. Remove Model from the Collection.
-		6. Get the length of Collection.
-		7. Add Model into the Collection at the end.
-		8. Remove Model from the Collection from the end.
-		9. Add Model into the Collection at the start.
-		10. Remove Model from the Collection from the start.
-		11. Getting data in object & string format.
-
-
-		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.
-	*/
+	/**
+	 * The goal of this file is to provide the basic understanding of
+	 * 1. Create a Collection
+	 * 2. Passing Model to Collection
+	 * 3. Setting build-in Collection events
+	 * 4. Add/Remove Model from collection at the end
+	 * 5. Add/Remove Model from collection at the start
+	 * 6. Get the length of collection
+	 */
 
 	var MasterModel = Backbone.Model.extend({
-		/*
-			This initialize function will get called when the model is first created.
-		*/
+		/**
+		 * `initialize` is a constructor function which gets called automatically at
+		 * the time of instance creation
+		 */
 		initialize: function() {
 			console.log("Your model have been initialize");
 		}
 	});
 
-	/*
-		Creating a new collection called MasterCollection by extending Backbone.Collection class.
-		Syntax: Backbone.Collection.extend(properties, [classProperties])
-	*/
 	var MasterCollection = Backbone.Collection.extend({
-		/*
-			This initialize function will get called when the collection is first created.
-		*/
 		initialize: function() {
 			console.log("Your collection have been initialize.");
+
+			/**
+			 * Subscribe collection events
+			 */
 			this.listenTo(this, 'add', this.onModelAdded);
-	        this.listenTo(this, 'remove', this.onModelRemoved);
+			this.listenTo(this, 'remove', this.onModelRemoved);
 		},
 
-		/*
-			Used to specify the model class that the collection contains.
-		*/
+		/**
+		 * Used to specify the model class that the collection contains.
+		 */
 		model: MasterModel,
 
 		onModelAdded: function() {
-			console.log("[Add model event got fired]");
+			console.log("Add model event got fired");
 		},
 
 		onModelRemoved: function() {
-			console.log("[Remove model event got fired]");
+			console.log("Remove model event got fired");
 		}
 	});
 
-	/*
-		Creating an object from MasterCollection which calls initialize function.
-	*/
 	var masterCollection = new MasterCollection();
 
-	/*
-		Add a model (or an array of models) to the collection.
-		Firing an "add" event.
-	*/
-	masterCollection.add(new MasterModel({name: 'Ashwin Hegde'}));
-	masterCollection.add(new MasterModel({name: 'Vinayak Patil'}));
-	masterCollection.add(new MasterModel({name: 'Jerin John'}));
-
-	/*
-		Display the data currently added in the collection.
-	*/
+	/**
+	 * Add a model (or an array of models) to the collection.
+	 * Firing an "add" event.
+	 */
+	masterCollection.add(new MasterModel({
+		name: 'Ashwin Hegde'
+	}));
+	masterCollection.add(new MasterModel({
+		name: 'Vinayak Patil'
+	}));
+	masterCollection.add(new MasterModel({
+		name: 'Pavan Solanki'
+	}));
+
+	/**
+	 * Display the data currently added in the collection.
+	 */
 	console.log("Data in Collection :: Add ")
 	console.log(masterCollection.toJSON());
 
-	/*
-		Remove a model (or an array of models) from the collection. Fires a "remove" event,
-
-		`at` is used to get a model from a collection, specified by index.
-		Note: index starts from 0
-	*/
+	/**
+	 * Remove a model (or an array of models) from the collection. Fires a "remove" event,
+	 * 
+	 * `at` is used to get a model from a collection, specified by index.
+	 *	Note: index starts from 0
+	 */
 	masterCollection.remove(masterCollection.at(1));
-	/*
-		Display the data after removing model from the collection.
-	*/
+
+	/**
+	 * Display the data after removing model from the collection.
+	 */
 	console.log("Remove data from Collection :: Remove ")
 	console.log(masterCollection.toJSON());
 
-	/*
-		Collection maintains a length property, counting the number of models it contains.
-	*/
+	/**
+	 * Collection maintains a length property, counting the number of models it contains.
+	 */
 	console.log("Collection length: " + masterCollection.length);
 
+	/**
+	 * Add a model at the end of a collection.
+	 */
+	masterCollection.push(new MasterModel({
+		name: 'Kumar Kundan'
+	}));
 
-	/*
-		Add a model at the end of a collection.
-	*/
-	masterCollection.push(new MasterModel({name: 'Saju Sasidharan'}));
-	/*
-		Display the data currently added in the collection.
-	*/
+	/**
+	 * Display the data currently added in the collection.
+	 */
 	console.log("Data in Collection :: Push");
 	console.log(masterCollection.toJSON());
 
-	/*
-		Remove and return the last model from a collection
-	*/
+	/**
+	 * Remove and return the last model from a collection
+	 */
 	masterCollection.pop();
-	/*
-		Display the data after removing last model from the collection.
-	*/
+
+	/**
+	 * Display the data after removing last model from the collection.
+	 */
 	console.log("Data in Collection :: POP");
 	console.log(masterCollection.toJSON());
 
+	/**
+	 * Add a model at the beginning of a collection.
+	 */
+	masterCollection.unshift(new MasterModel({
+		name: 'Ajay Sajwan'
+	}));
 
-	/*
-		Add a model at the beginning of a collection.
-	*/
-	masterCollection.unshift(new MasterModel({name: 'Yogesh Gaikwad'}));
-	/*
-		Display the data currently added in the collection.
-	*/
+	/**
+	 * Display the data currently added in the collection.
+	 */
 	console.log("Data in Collection :: unshift");
 	console.log(masterCollection.toJSON());
 
-	/*
-		Remove and return the first model from a collection.
-	*/
+	/**
+	 * Remove and return the first model from a collection.
+	 */
 	masterCollection.shift();
-	/*
-		Display the data after removing first model from the collection.
-	*/
+
+	/**
+	 * Display the data after removing first model from the collection.
+	 */
 	console.log("Data in Collection :: Shift");
 	console.log(masterCollection.toJSON());