Skip to content

Commit

Permalink
Updates collection egs
Browse files Browse the repository at this point in the history
  • Loading branch information
@hegdeashwin
hegdeashwin committed Sep 26, 2015
1 parent 629b66e commit b888976
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 302 deletions.
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
40 changes: 7 additions & 33 deletions codes/Ch4_Collection/Examples/Example2/Example-2.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 2: 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-2.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-2.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-2.js, Here the example-main-2.js is included with in js directory,
Thus the relative path for the file becomes example-main-2.js.
Expand Down
Loading

0 comments on commit b888976

Please sign in to comment.