Skip to content

Commit

Permalink
Merge pull request #25 from hegdeashwin/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
Ashwin Hegde committed Sep 26, 2015
2 parents d7c3845 + 71aebe7 commit 5b56a9e
Show file tree
Hide file tree
Showing 13 changed files with 285 additions and 502 deletions.
63 changes: 14 additions & 49 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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>

Expand Down Expand Up @@ -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
Expand Down
16 changes: 3 additions & 13 deletions codes/Ch3_View_Events_Templates/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
40 changes: 7 additions & 33 deletions codes/Ch4_Collection/Examples/Example1/Example-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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.
Expand Down
173 changes: 85 additions & 88 deletions codes/Ch4_Collection/Examples/Example1/example-main-1.js
View file
Original file line number Diff line number Diff line change
@@ -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());

Expand Down
Loading

0 comments on commit 5b56a9e

Please sign in to comment.