├── LICENSE.txt ├── README.md ├── codes ├── Ch1_Introduction │ └── Example1 │ │ └── Example-1.html ├── Ch2_Model │ ├── Examples │ │ ├── Example1 │ │ │ ├── Example-1.html │ │ │ └── example-main-1.js │ │ ├── Example2 │ │ │ ├── Example-2.html │ │ │ └── example-main-2.js │ │ ├── Example3 │ │ │ ├── Example-3.html │ │ │ └── example-main-3.js │ │ ├── Example4 │ │ │ ├── Example-4.html │ │ │ └── example-main-4.js │ │ └── Example5 │ │ │ ├── Example-5.html │ │ │ └── example-main-5.js │ └── README.md ├── Ch3_View_Events_Templates │ ├── Ch3_1_View │ │ └── Example1 │ │ │ ├── Example-1.html │ │ │ └── example-main-1.js │ ├── Ch3_2_Templating │ │ ├── Example1 │ │ │ ├── Example-1.html │ │ │ └── example-main-1.js │ │ ├── Example2 │ │ │ ├── Example-2.html │ │ │ └── example-main-2.js │ │ └── Example3 │ │ │ ├── Example-3.html │ │ │ └── example-main-3.js │ ├── Ch3_3_Events │ │ ├── Example1 │ │ │ ├── Example-1.html │ │ │ └── example-main-1.js │ │ ├── Example2 │ │ │ ├── Example-2.html │ │ │ └── example-main-2.js │ │ ├── Example3 │ │ │ ├── Example-3.html │ │ │ └── example-main-3.js │ │ └── Example4 │ │ │ ├── Example-4.html │ │ │ └── example-main-4.js │ └── README.md ├── Ch4_Collection │ ├── Examples │ │ ├── Example1 │ │ │ ├── Example-1.html │ │ │ └── example-main-1.js │ │ ├── Example2 │ │ │ ├── Example-2.html │ │ │ └── example-main-2.js │ │ └── Example3 │ │ │ ├── Example-3.html │ │ │ └── example-main-3.js │ └── README.md ├── Ch5_Router │ ├── Examples │ │ └── Example1 │ │ │ ├── Example-1.html │ │ │ └── example-main-1.js │ └── README.md ├── Ch6_Extended-Session │ ├── Application Examples │ │ ├── Example1 │ │ │ ├── Example-1.html │ │ │ └── example-main-1.js │ │ ├── Example2 │ │ │ ├── Example-2.html │ │ │ └── example-main-2.js │ │ ├── Example3 │ │ │ ├── Example-3.html │ │ │ └── example-main-3.js │ │ ├── Example4 │ │ │ ├── Example-4.html │ │ │ └── example-main-4.js │ │ ├── Example5 │ │ │ ├── Example-5.html │ │ │ └── example-main-5.js │ │ └── README.md │ └── Plugins Examples │ │ ├── Models │ │ ├── Deep-Model │ │ │ └── Example1 │ │ │ │ ├── Example-1.html │ │ │ │ └── example-main-1.js │ │ ├── Form │ │ │ ├── Example1 │ │ │ │ ├── Example-1.html │ │ │ │ └── example-main-1.js │ │ │ ├── Example2 │ │ │ │ ├── Example-2.html │ │ │ │ └── example-main-2.js │ │ │ └── Example3 │ │ │ │ ├── Example-3.html │ │ │ │ └── example-main-3.js │ │ └── README.md │ │ └── README.md ├── css │ ├── bootstrap-responsive.min.css │ └── bootstrap.min.css ├── img │ ├── glyphicons-halflings-white.png │ ├── glyphicons-halflings.png │ └── placeholder.png └── js │ ├── backbone-min.js │ ├── backbone-min.js-1.0 │ ├── bbplugins │ ├── deep-model │ │ └── deep-model.min.js │ ├── forms │ │ ├── backbone-forms.js │ │ ├── backbone-forms.min.js │ │ └── editors │ │ │ ├── list.js │ │ │ └── list.min.js │ └── model-binder │ │ ├── collectionBinder.min.js │ │ └── modelBinder.min.js │ ├── bootstrap.min.js │ ├── google-map-api.json │ ├── jquery-min.js │ ├── json2.js │ └── underscore-min.js └── slides ├── Training-Session-1.ppsx └── Training-Session-8.ppsx /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-2018 Ashwin Hegde 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Structuring your web apps with Backbone.js 2 | 3 | This training kit has been developed for those who 4 | * Already have the basic knowledge of JavaScript & jQuery; 5 | * Who wants to write JavaScript in a structured/pattern way; 6 | 7 | This training kit will teach you the basics of Backbone.js and introduction to advanced part; 8 | 9 | ## Prerequisites arranged as per the priority 10 | * Basic understanding of web development concepts like functional programming, templating etc. 11 | * JavaScript, jQuery, Underscore. 12 | 13 | > If you are already know & understand Backbone.js and want to learn Backbone.js Marionette framework then its strongly recommended to skip this training kit and jump to understand the basic to advanced of Backbone.js Marionette from the repository "[Learning Backbone Marionette](https://github.com/hegdeashwin/learning-backbone-marionette)" 14 | 15 | ## Training kit includes below session 16 | * Ch 1 : Getting Started. 17 | * Ch 2 : Backbone Model. 18 | * Ch 3 : Backbone View, Events & Templates. 19 | * Ch 4 : Backbone Collection. 20 | * Ch 5 : Backbone Router. 21 | * Ch 6 : Application DEMO & Plugin examples. 22 | 23 | * For more information on Backbone's coding standards, plugins etc. Please visit [Backbone's training kit Github Wiki documentation](https://github.com/hegdeashwin/Backbone/wiki) 24 | 25 | ## How to use training kit examples 26 | 27 | Clone the repository and start running the examples in your browser and browse the codes with ready commits or 28 | you can also experiment with the code online which is powered by JSFiddle. 29 | 30 | [Download this repository](https://github.com/hegdeashwin/Backbone/archive/master.zip) OR [Experiment online](http://jsfiddle.net/hegdeashwin/TKkMt/show/) 31 | 32 | ## Recommended text editor 33 | 34 | You can used any text editor which ever you are comfortable with on any operating systems. 35 | But when it comes to JavaScript based project I personally recommend the following editors 36 | as per the priority. 37 | 38 | * Sublime Text 2 or above 39 | * Atom 40 | * Bracket 41 | * Notepad++ 42 | 43 | ## Development tools 44 | 45 | * Backbone Eye, [Home Site](//dhruvaray.github.io/spa-eye/) | [Git Repository](https://github.com/dhruvaray/spa-eye) 46 | A Mozilla FIrefox - Firebug extension for debugging Backbone.js applications. A way to understand Backbone application behavior without wading through JavaScript code. 47 | 48 | * Backbone Debugger, [Git Repository](//github.com/Maluen/Backbone-Debugger) 49 | A Google Chrome - Developer Tools extension for debugging Backbone.js applications. Displays in real-time all the application views, models, collections and routers, with detailed information such as handled jQuery events, model attributes, collection models, sync status, events triggered and more. 50 | 51 | * Nebula, [Git Repository](//github.com/hegdeashwin/Nebula) 52 | An open source application skeleton for a typical Backbone web apps. You can use it to quickly bootstrap your Backbone web application projects. 53 | 54 | * Nebula-cli, [Git Repository](//github.com/hegdeashwin/Nebula-cli) 55 | Nebula-cli is a command line generator for Nebula. This tool will help to generate a walking application skeleton for a typical Backbone web apps. You can use it to quickly bootstrap your Backbone web application projects. 56 | 57 | * Boneloop, [Git Repository](//github.com/hegdeashwin/Boneloop) 58 | 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. 59 | 60 | * Bonegear, [Git Repository](https://github.com/hegdeashwin/Bonegear) 61 | Bonegear is an open source UI components for your Backbone.js projects. 62 | 63 | ## Contributors 64 | 65 | Developed & maintained by author: Ashwin Hegde & [Contributors](//github.com/hegdeashwin/Backbone/graphs/contributors) 66 | 67 | We really appreciate all kind of feedback and contributions. Thank you for using and supporting this project. 68 | 69 | To request a feature or you find any typo errors, enhancements or questions; please feel free to send a pull-request on "develop" branch or post it on following link, or vote for the ones that are already registered. 70 | 71 | [https://github.com/hegdeashwin/Backbone/issues](https://github.com/hegdeashwin/Backbone/issues) 72 | 73 | Visit the following link to know about: 74 | 75 | * [The annotated source code of Backbone.js.](http://backbonejs.org/docs/backbone.html) 76 | * [Online Test Suite](http://backbonejs.org/test/) 77 | * [The Real world Projects](http://backbonejs.org/#examples) 78 | 79 | ## License 80 | 81 | The MIT License (MIT) 82 | 83 | Copyright (c) 2016-2018 Ashwin Hegde 84 | -------------------------------------------------------------------------------- /codes/Ch1_Introduction/Example1/Example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: Introduction 6 | 7 | 8 |

Structuring your web apps via Backbone.js

9 |

Ch 1: Introduction to Backbone.js

10 |

How to run this example.

11 |
    12 |
  1. Open Example-1.html in browser.
    2. 13 |
  2. Press F12, go to console tab.
    3. 14 |
  3. Goto console and type "Backbone" & understand the Backbone object
    4. 15 |
16 | 17 | 24 | 25 | 26 | 34 | 35 | 36 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example1/Example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: Backbone Model 6 | 7 | 8 |

Structuring your web apps via Backbone.js

9 |

Ch 1: Understanding Backbone Model

10 |

How to run this example.

11 |
    12 |
  1. Open Example-1.html in browser.
    2. 13 |
  2. Press F12, go to console tab.
    3. 14 |
15 | 16 | 23 | 24 | 25 | 33 | 34 | 35 | 39 | 40 | 41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example1/example-main-1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Create Backbone Model 5 | * 2. Create instance of Backbone Model 6 | * 3. Setting & getting default attributes 7 | * 4. Initialize a constructor 8 | * 5. Setting & getting attributes 9 | * 6. Get the list of all attributes 10 | */ 11 | 12 | /** 13 | * Creating a new model called MasterModel by extending Backbone.Model class 14 | * Syntax: Backbone.Model.extend(properties, [classProperties]) 15 | */ 16 | var MasterModel = Backbone.Model.extend({ 17 | /** 18 | * `initialize` is a constructor function which gets called automatically at 19 | * the time of instance creation 20 | */ 21 | initialize: function() { 22 | console.log("Your model have been initialize."); 23 | }, 24 | 25 | /** 26 | * These are various attributes that will be set by default when the model gets created. 27 | */ 28 | defaults: { 29 | companyName: 'Cybage Software Private Limited', 30 | country: 'India', 31 | city: 'Pune' 32 | } 33 | }); 34 | 35 | /** 36 | * Creating an instance of MasterModel. 37 | */ 38 | var masterModel = new MasterModel(); 39 | 40 | /** 41 | * Getting information about Model instance. 42 | */ 43 | console.log("Model object: ", masterModel); 44 | 45 | /** 46 | * Getting the default values from attributes using `get` method. 47 | */ 48 | console.log("Company Name: " + masterModel.get('companyName')); 49 | console.log("Country: " + masterModel.get('country')); 50 | console.log("City: " + masterModel.get('city')); 51 | 52 | /** 53 | * Setting a single attribute in the model using `set` method. 54 | */ 55 | masterModel.set('totalEmployees', '4000'); 56 | 57 | /** 58 | * Getting the newly set attribute value using `get` method. 59 | */ 60 | console.log("Total Employees: ", masterModel.get('totalEmployees')); 61 | 62 | /** 63 | * Setting multiple attributes in the model using `set` method. 64 | */ 65 | masterModel.set({ 66 | 'CMMiLevel': 5, 67 | 'totalDevCenters': 4 68 | }); 69 | 70 | /** 71 | * Getting the newly set attributes values. 72 | */ 73 | console.log("CMMiLevel Standard: ", masterModel.get('CMMiLevel')); 74 | console.log("Total Development Centers in India: ", masterModel.get('totalDevCenters')); 75 | 76 | /** 77 | * Getting information about object previous attributes. 78 | */ 79 | console.log("Previous attributes: ", masterModel._previousAttributes); 80 | 81 | /** 82 | * Getting the list of all attributes toJSON 83 | */ 84 | console.log("1st Way: ", masterModel.attributes); 85 | console.log("2nd Way: ", masterModel.toJSON()); 86 | 87 | })(); -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example2/Example-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 2: Backbone Model 6 | 7 | 8 |

Structuring your web apps via Backbone.js

9 |

Ch 1: Understanding Backbone Model

10 |

How to run this example.

11 |
    12 |
  1. Open Example-2.html in browser.
    2. 13 |
  2. Press F12, go to console tab.
    3. 14 |
15 | 16 | 23 | 24 | 25 | 33 | 34 | 35 | 39 | 40 | 41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example2/example-main-2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Unset attribute 5 | * 2. Cleaning all attributes 6 | * 3. Setting & getting default attributes 7 | * 4. Initialize a constructor 8 | * 5. Setting & getting attributes 9 | * 6. Get the list of all attributes 10 | */ 11 | 12 | /** 13 | * Creating a new model called MasterModel by extending Backbone.Model class 14 | * Syntax: Backbone.Model.extend(properties, [classProperties]) 15 | */ 16 | var MasterModel = Backbone.Model.extend({}); 17 | 18 | /** 19 | * Creating an instance of MasterModel. 20 | */ 21 | var masterModel = new MasterModel(); 22 | 23 | /** 24 | * Setting the bunch of attributes in the model. 25 | */ 26 | masterModel.set({ 27 | 'firstName': 'Ashwin', 28 | 'lastName': 'Hegde', 29 | 'designation': 'Web Developer' 30 | }); 31 | 32 | /** 33 | * Getting the newly set attributes values. 34 | */ 35 | console.log("Getting attributes: "); 36 | console.log(masterModel.toJSON()); 37 | 38 | /** 39 | * Check, if the attribute is already set or not 40 | */ 41 | if (masterModel.has('city')) { 42 | console.log("City attribute is already set"); 43 | } else { 44 | console.log("City attribute is not set"); 45 | } 46 | 47 | if (masterModel.has('lastName')) { 48 | console.log("Last name attribute is already set"); 49 | } else { 50 | console.log("Last name attribute is not set"); 51 | } 52 | 53 | /** 54 | * Unset the `designation` attribute and then try get the data. 55 | */ 56 | masterModel.unset('designation'); 57 | 58 | /** 59 | * Getting the attribute. 60 | */ 61 | console.log("Getting the attributes after unset"); 62 | console.log(masterModel.toJSON()); 63 | 64 | /** 65 | * Clear will remove all the attributes and then try get the data. 66 | */ 67 | masterModel.clear(); 68 | /** 69 | * Getting the attribute. 70 | */ 71 | console.log("Getting the attributes after clear"); 72 | console.log(masterModel.toJSON()); 73 | 74 | /** 75 | * Get model client id. 76 | */ 77 | console.log("Model Client id: " + masterModel.cid); 78 | 79 | /** 80 | * Creating a model & setting user id to it. 81 | */ 82 | var childModel = Backbone.Model.extend({ 83 | idAttribute: "_id" 84 | }); 85 | 86 | var childmodel = new childModel({ 87 | _id: 1, 88 | firstName: 'Vinayak', 89 | lastName: 'Patil' 90 | }); 91 | console.log(childmodel.toJSON()); 92 | 93 | console.log("Client id still remain: ", childmodel); 94 | 95 | console.log("Getting user id: " + childmodel.id); 96 | })(); -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example3/Example-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 3: Backbone Model 6 | 7 | 8 |

Structuring your web apps via Backbone.js

9 |

Ch 1: Understanding Backbone Model

10 |

How to run this example.

11 |
    12 |
  1. Open Example-3.html in browser.
    2. 13 |
  2. Press F12, go to console tab.
    3. 14 |
15 | 16 | 23 | 24 | 25 | 33 | 34 | 35 | 39 | 40 | 41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example3/example-main-3.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Access JSON data through URL method 5 | * 2. Parse data 6 | * 3. REST operations on JSON data 7 | */ 8 | 9 | /** 10 | * Creating a new model called MasterModel by extending Backbone.Model class 11 | * Syntax: Backbone.Model.extend(properties, [classProperties]) 12 | */ 13 | var MasterModel = Backbone.Model.extend({ 14 | 15 | /** 16 | * Whenever 'fetch | save | destroy' is called URL function is needed else it will through error. 17 | */ 18 | url: function() { 19 | return "../../../js/google-map-api.json"; 20 | }, 21 | 22 | /** 23 | * This function gets called automatically if its present in the model; this function helps to parse the 24 | * data and return it to model instance; it takes response as argument and it needs to be return else 25 | * it will return undefined 26 | */ 27 | parse: function(response) { 28 | console.log("Parse response: "); 29 | console.log(response); 30 | 31 | return response; 32 | } 33 | }); 34 | 35 | var masterModel = new MasterModel(); 36 | console.log(masterModel); 37 | 38 | /** 39 | * Getting data from Model fetch method. 40 | */ 41 | masterModel.fetch({ 42 | success: function() { 43 | console.log("Data coming from fetch success: "); 44 | console.log(masterModel.toJSON()); 45 | }, 46 | error: function() { 47 | console.log("Some error triggered while accessing data service api."); 48 | } 49 | }); 50 | 51 | masterModel.set({ 52 | firstName: 'Ashwin', 53 | lastName: 'Hegde' 54 | }); 55 | 56 | /** 57 | * Save data to your Model; execute REST POST, PUT operations 58 | * Below is only to show 'save' syntax; 59 | */ 60 | // masterModel.save(masterModel.toJSON(), { 61 | // success: function() { 62 | // console.log("Data coming from fetch success: "); 63 | // console.log(masterModel.toJSON()); 64 | // }, 65 | // error: function() { 66 | // console.log("Some error triggered while accessing Google service api."); 67 | // } 68 | // }); 69 | 70 | /** 71 | * Delete data from your Model; execute REST DELETE operation 72 | * Below is only to show 'destroy' syntax; 73 | */ 74 | // masterModel.destroy(masterModel.toJSON(), { 75 | // success: function() { 76 | // console.log("Data coming from fetch success: "); 77 | // console.log(masterModel.toJSON()); 78 | // }, 79 | // error: function() { 80 | // console.log("Some error triggered while accessing Google service api."); 81 | // } 82 | // }); 83 | 84 | })(); -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example4/Example-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 4: Backbone Model 6 | 7 | 8 |

Structuring your web apps via Backbone.js

9 |

Ch 1: Understanding Backbone Model

10 |

How to run this example.

11 |
    12 |
  1. Open Example-4.html in browser.
    2. 13 |
  2. Press F12, go to console tab.
    3. 14 |
15 | 16 | 23 | 24 | 25 | 33 | 34 | 35 | 39 | 40 | 41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example4/example-main-4.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Attributes validation 5 | */ 6 | 7 | /** 8 | * Creating a new model called MasterModel by extending Backbone.Model class 9 | * Syntax: Backbone.Model.extend(properties, [classProperties]) 10 | */ 11 | var MasterModel = Backbone.Model.extend({ 12 | /** 13 | * model's validate method for attributes validation. 14 | */ 15 | validate: function(attrs, options) { 16 | if (attrs.age < 18) { 17 | this.trigger('error', "Your age must be more then 18 years."); 18 | return true; 19 | } 20 | } 21 | }); 22 | 23 | var masterModel = new MasterModel({ 24 | name: 'Ashwin Hegde' 25 | }); 26 | 27 | masterModel.on('error', function(error) { 28 | console.log("Error: ", error); 29 | }); 30 | 31 | /** 32 | * This will not set age in the model, due to not passing validation '< 18' 33 | */ 34 | masterModel.set({ 35 | age: 15 36 | }, { 37 | validate: true 38 | }); 39 | 40 | 41 | /** 42 | * This will set age in the model, due to passing validation '< 18'; 43 | * Uncomment below to see the model changes 44 | */ 45 | // 46 | // masterModel.set({ 47 | // age: 20 48 | // }, { 49 | // validate: true 50 | // }); 51 | 52 | 53 | /** 54 | * Let verify if age got set or not 55 | */ 56 | console.log('Master Model: ', masterModel.toJSON()); 57 | 58 | })(); 59 | -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example5/Example-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 5: Backbone Model 6 | 7 | 8 |

Structuring your web apps via Backbone.js

9 |

Ch 1: Understanding Backbone Model

10 |

How to run this example.

11 |
    12 |
  1. Open Example-5.html in browser.
    2. 13 |
  2. Press F12, go to console tab.
    3. 14 |
15 | 16 | 23 | 24 | 25 | 33 | 34 | 35 | 39 | 40 | 41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /codes/Ch2_Model/Examples/Example5/example-main-5.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Access 3rd parth service data through URL method 5 | * 2. Setting attributes to URL; 6 | * 3. Access attributes from within model 7 | */ 8 | 9 | var MasterModel = Backbone.Model.extend({ 10 | 11 | url: function() { 12 | var _apiUrl = 'http://jsonplaceholder.typicode.com/users'; 13 | 14 | if (this.has('id')) { 15 | _apiUrl = 'http://jsonplaceholder.typicode.com/users/' + this.get('id'); 16 | } 17 | return _apiUrl; 18 | } 19 | }); 20 | 21 | var masterModel1 = new MasterModel(); 22 | 23 | /** 24 | * Getting data from Model fetch method. 25 | */ 26 | masterModel1.fetch({ 27 | success: function() { 28 | console.log("Data coming from fetch success: "); 29 | console.log(masterModel1.toJSON()); 30 | }, 31 | error: function() { 32 | console.log("Some error triggered while accessing service api."); 33 | } 34 | }); 35 | 36 | /** 37 | * Setting id attribute 38 | */ 39 | var masterModel2 = new MasterModel({ 40 | "id": 1 41 | }); 42 | 43 | /** 44 | * Getting data from Model fetch method. 45 | */ 46 | masterModel2.fetch({ 47 | success: function() { 48 | console.log("Data coming from fetch success: "); 49 | console.log(masterModel2.toJSON()); 50 | }, 51 | error: function() { 52 | console.log("Some error triggered while accessing service api."); 53 | } 54 | }); 55 | 56 | })() -------------------------------------------------------------------------------- /codes/Ch2_Model/README.md: -------------------------------------------------------------------------------- 1 | # Ch2 - Understanding Backbone Model 2 | 3 | ## Example 1: 4 | * Create Backbone Model 5 | * Create instance of Backbone Model 6 | * Setting & getting default attributes 7 | * Initialize a constructor 8 | * Setting & getting attributes 9 | * Get the list of all attributes 10 | 11 | ## Example 2: 12 | * Unset attribute 13 | * Cleaning all attributes 14 | * Check if attributes is set or not 15 | * Getting & Setting Model id 16 | 17 | ## Example 3: 18 | * Access JSON data through URL method 19 | * Parse data 20 | * REST operations on JSON data 21 | 22 | ## Example 4: 23 | * Attributes validation 24 | 25 | ## Example 5: 26 | * Access 3rd parth service data through URL method 27 | * Setting attributes to URL; 28 | * Access attributes from within model -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_1_View/Example1/Example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: Backbone View 6 | 7 | 8 |

Ch 3: Understanding Backbone View

9 |

How to run this example?

10 |
    11 |
  1. Open Example-1.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 | 22 | 23 | 24 | 32 | 33 | 34 | 35 | 39 | 40 | 41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_1_View/Example1/example-main-1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | /** 4 | * The goal of this file is to provide the basic understanding of 5 | * 1. Create Backbone View 6 | * 2. Create instance of Backbone View 7 | * 3. Setting default el reference 8 | * 4. Setting classname, id and tagname 9 | * 5. Setting custom el reference 10 | */ 11 | 12 | /** 13 | * Creating a new View called MasterView by extending Backbone.View class 14 | * Syntax: Backbone.View.extend(properties, [classProperties]) 15 | */ 16 | var MasterView = Backbone.View.extend({ 17 | /** 18 | * `initialize` is a constructor function which gets called automatically at 19 | * the time of instance creation 20 | */ 21 | initialize: function() { 22 | console.log("Your View have been initialize."); 23 | }, 24 | 25 | /** 26 | * if `tagName` is not specified then its default to `div`; 27 | * This will set class name for the DOM element to which your view is refering to 28 | * You can also set multiple classes like 'container mainpage centerPanel ...' 29 | * This is optional property; 30 | */ 31 | className: 'container', 32 | 33 | /** 34 | * This will set id for the DOM element to which your view is refering to 35 | * This is optional property; 36 | */ 37 | id: 'master' 38 | 39 | }); 40 | 41 | /** 42 | * Creating an instance of MasterView. 43 | */ 44 | var masterView = new MasterView(); 45 | console.log(masterView); 46 | 47 | /** 48 | * masterView.el will display
49 | */ 50 | console.log(masterView.el); 51 | 52 | /** 53 | * Creating a new view called ChildView by extending Backbone.View class. 54 | */ 55 | var ChildView = Backbone.View.extend({ 56 | 57 | /** 58 | * tagName is specified as 'ul' will override the default 59 | */ 60 | tagName: 'ul', 61 | 62 | className: 'row', 63 | 64 | id: 'child' 65 | 66 | }); 67 | 68 | /** 69 | * Creating an instance of ChildView. 70 | */ 71 | var childView = new ChildView(); 72 | 73 | /** 74 | * childView.el will display 75 | */ 76 | console.log(childView.el); 77 | 78 | })(); -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example1/Example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: Backbone Templating 6 | 7 | 8 |

Ch 3: Understanding Backbone Templating

9 |

How to run this example?

10 |
    11 |
  1. Open Example-1.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 |
16 |
17 | 18 | 49 |
50 |
51 | 52 | 59 | 60 | 61 | 69 | 70 | 71 | 75 | 76 | 77 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example1/example-main-1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Setting DOM reference using `el` 5 | * 2. Compiling Underscore template 6 | * 3. Injecting data to template 7 | * 4. Using this.$el to render template 8 | */ 9 | 10 | /** 11 | * Creating a new view called MasterModel by extending Backbone.View class 12 | * Syntax: Backbone.View.extend(properties, [classProperties]) 13 | */ 14 | var MasterView = Backbone.View.extend({ 15 | /** 16 | * `initialize` is a constructor function which gets called automatically at 17 | * the time of instance creation 18 | */ 19 | initialize: function() { 20 | this.render(); 21 | }, 22 | 23 | /** 24 | * `el` is a DOM reference for the view 25 | */ 26 | el: "#directionApi", 27 | 28 | /** 29 | * Using underscore _.template method to compile html template 30 | */ 31 | template: _.template($("#routesTable").html()), 32 | 33 | /** 34 | * Render function can be used for data injection and rendering purpose; 35 | * Also passing data to template; 36 | */ 37 | render: function() { 38 | this.$el.html(this.template({ 39 | "ne_lat": "19.09192670", 40 | "ne_lng": "73.85839480", 41 | "sw_lat": "18.52064730", 42 | "sw_lng": "72.87766890" 43 | })); 44 | } 45 | 46 | }); 47 | 48 | var masterView = new MasterView(); 49 | console.log(masterView.el); 50 | 51 | })(); -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example2/Example-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 2: Backbone Templating 6 | 7 | 8 |

Ch 3: Understanding Backbone Templating

9 |

How to run this example?

10 |
    11 |
  1. Open Example-2.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 |
16 |
17 | 37 |
38 |
39 | 40 | 47 | 48 | 49 | 57 | 58 | 59 | 63 | 64 | 65 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example2/example-main-2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Using model for data 5 | * 2. Using model instance from within view constructor 6 | * 3. Parsing data in model 7 | * 4. Rendering underscore template 8 | */ 9 | 10 | var MasterModel = Backbone.Model.extend({ 11 | 12 | url: function() { 13 | return 'http://jsonplaceholder.typicode.com/users'; 14 | }, 15 | 16 | parse: function(response) { 17 | var minInfo = []; 18 | 19 | _.each(response, function(data) { 20 | minInfo.push({ 21 | "name": data.name, 22 | "email": data.email, 23 | "website": data.website 24 | }); 25 | }); 26 | 27 | console.log('Parsed Data: ', minInfo); 28 | 29 | return minInfo; 30 | } 31 | }); 32 | 33 | var MasterView = Backbone.View.extend({ 34 | 35 | initialize: function() { 36 | this.model = new MasterModel(); 37 | this.render(); 38 | }, 39 | 40 | el: "#directionApi", 41 | 42 | template: _.template($("#routesTable").html()), 43 | 44 | render: function() { 45 | var self = this; 46 | 47 | this.model.fetch({ 48 | success: function() { 49 | console.log(self.model.toJSON()); 50 | 51 | /** 52 | * Passing key:value data to template and template to DOM 53 | */ 54 | self.$el.html(self.template({ 55 | data: self.model.toJSON() 56 | })); 57 | }, 58 | error: function() { 59 | console.log("Some error got triggered while accessing service api."); 60 | } 61 | }); 62 | 63 | return this; 64 | } 65 | 66 | }); 67 | 68 | var masterView = new MasterView(); 69 | console.log(masterView.el); 70 | 71 | })(); -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example3/Example-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 3: Backbone Templating 6 | 7 | 8 |

Ch 3: Understanding Backbone Templating

9 |

How to run this example?

10 |
    11 |
  1. Open Example-3.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 |
16 |
17 | 41 |
42 |
43 | 44 | 51 | 52 | 53 | 61 | 62 | 63 | 67 | 68 | 69 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example3/example-main-3.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Using model for data with id 5 | */ 6 | 7 | var MasterModel = Backbone.Model.extend({ 8 | url: function() { 9 | var _apiUrl = 'http://jsonplaceholder.typicode.com/users/1'; 10 | 11 | if (this.has('id')) { 12 | _apiUrl = 'http://jsonplaceholder.typicode.com/users/' + this.get('id'); 13 | } 14 | return _apiUrl; 15 | } 16 | }); 17 | 18 | var MasterView = Backbone.View.extend({ 19 | 20 | initialize: function() { 21 | this.model = new MasterModel({ 22 | "id": 9 23 | }); 24 | this.render(); 25 | }, 26 | 27 | el: "#directionApi", 28 | 29 | template: _.template($("#routesTable").html()), 30 | 31 | render: function() { 32 | var self = this; 33 | 34 | this.model.fetch({ 35 | success: function() { 36 | self.$el.html(self.template(self.model.toJSON())); 37 | }, 38 | error: function() { 39 | console.log("Some error got triggered while accessing service api."); 40 | } 41 | }); 42 | } 43 | 44 | }); 45 | 46 | var masterView = new MasterView(); 47 | console.log(masterView.el); 48 | 49 | })(); -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_3_Events/Example1/Example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: Backbone Events 6 | 7 | 8 |

Ch 3: Understanding Backbone Events

9 |

How to run this example?

10 |
    11 |
  1. Open Example-1.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 |
16 |
17 | 18 |

19 |
20 | 21 |
22 |
23 | 24 | 31 | 32 | 33 | 41 | 42 | 43 | 47 | 48 | 49 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_3_Events/Example1/example-main-1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Define events hash 5 | * 2. Define event scope for View using el DOM reference 6 | */ 7 | 8 | var MasterView = Backbone.View.extend({ 9 | /** 10 | * All views have a DOM element at all times (the el property), 11 | * whether they've already been inserted into the page or not. 12 | * 13 | * el also defines your view scope; You can not bind bind in events hash for DOM element out side this view 14 | */ 15 | el: '.workspace', 16 | 17 | /** 18 | * Events hash. 19 | */ 20 | events: { 21 | 'click input[type=submit]': 'submitForm', 22 | 'click input[type=button]': 'buttonForm' 23 | }, 24 | 25 | /** 26 | * Custom function gets fired when specific event gets called. 27 | */ 28 | submitForm: function() { 29 | console.log("Submit Button got clicked. Time to validate form data."); 30 | }, 31 | 32 | /** 33 | * Won't able to access this function. The element is outside view scope 34 | */ 35 | buttonForm: function() { 36 | console.log("Won't able to access this function. This is out of view scope."); 37 | } 38 | 39 | }); 40 | 41 | var masterView = new MasterView(); 42 | 43 | })(); 44 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_3_Events/Example2/Example-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 2: Backbone Events 6 | 7 | 8 |

Ch 3: Understanding Backbone Events

9 |

How to run this example?

10 |
    11 |
  1. Open Example-2.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 |
16 | 17 |
18 | 19 | 26 | 27 | 28 | 36 | 37 | 38 | 42 | 43 | 44 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_3_Events/Example2/example-main-2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Remove view from DOM. 5 | */ 6 | 7 | var MasterView = Backbone.View.extend({ 8 | 9 | el: '.workspace', 10 | 11 | events: { 12 | 'click input[type=submit]': 'removeView' 13 | }, 14 | 15 | removeView: function() { 16 | console.log("This function will remove the current view from DOM."); 17 | this.remove(); 18 | } 19 | }); 20 | 21 | /** 22 | * Don't save your instance; Just create it 23 | */ 24 | new MasterView(); 25 | 26 | })(); 27 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_3_Events/Example3/Example-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 3: Backbone Events 6 | 7 | 8 |

Ch 3: Understanding Backbone Events

9 |

How to run this example?

10 |
    11 |
  1. Open Example-3.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | 29 | 30 | 31 | 39 | 40 | 41 | 45 | 46 | 47 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_3_Events/Example3/example-main-3.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Old way to Subscribe/Unsubscribe a custom event 5 | * 2. Old way to Subscribe a custom event onces 6 | * 3. Trigger a subscribed event 7 | */ 8 | 9 | var MasterView = Backbone.View.extend({ 10 | initialize: function() { 11 | 12 | /** 13 | * Subscribe `alarm` event forever till it is manually off 14 | */ 15 | this.on('alarm', this.doSomething); 16 | 17 | /** 18 | * Subscribe `greeting` event once 19 | */ 20 | this.once('greeting', this.doSomethingOnce); 21 | }, 22 | 23 | doSomething: function(name) { 24 | console.log("Wake up, " + name); 25 | }, 26 | 27 | doSomethingOnce: function(name) { 28 | console.log("Good Morning, " + name); 29 | }, 30 | 31 | el: '.workspace', 32 | 33 | events: { 34 | 'click input[id=triggerOnAlarm]': 'triggerOnAlarm', 35 | 'click input[id=triggerOffAlarm]': 'triggerOffAlarm', 36 | 'click input[id=triggerOnce]': 'triggerOnce' 37 | }, 38 | 39 | triggerOnAlarm: function() { 40 | /** 41 | * Trigger the event by specifing event name 42 | */ 43 | this.trigger('alarm', 'Ashwin'); 44 | }, 45 | 46 | triggerOffAlarm: function() { 47 | /** 48 | * Unsubscribe the event 49 | */ 50 | this.off('alarm'); 51 | }, 52 | 53 | triggerOnce: function() { 54 | this.trigger('greeting', 'Ashwin'); 55 | } 56 | 57 | }); 58 | 59 | new MasterView(); 60 | 61 | })(); -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_3_Events/Example4/Example-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 4: Backbone Events 6 | 7 | 8 |

Ch 3: Understanding Backbone Events

9 |

How to run this example?

10 |
    11 |
  1. Open Example-4.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | 29 | 30 | 31 | 39 | 40 | 41 | 45 | 46 | 47 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/Ch3_3_Events/Example4/example-main-4.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. New way to Subscribe/Unsubscribe a custom event 5 | * 2. New way to Subscribe a custom event onces 6 | * 3. Trigger a subscribed event 7 | */ 8 | 9 | var MasterView = Backbone.View.extend({ 10 | initialize: function() { 11 | 12 | this.listenTo(this, 'alarm', this.doSomething); 13 | 14 | this.listenToOnce(this, 'greeting', this.doSomethingOnce); 15 | }, 16 | 17 | el: '.workspace', 18 | 19 | events: { 20 | 'click input[id=triggerOnAlarm]': 'triggerOnAlarm', 21 | 'click input[id=triggerOffAlarm]': 'triggerOffAlarm', 22 | 'click input[id=triggerOnce]': 'triggerOnce' 23 | }, 24 | 25 | doSomething: function(name) { 26 | console.log("Wake up, " + name); 27 | }, 28 | 29 | doSomethingOnce: function(name) { 30 | console.log("Good Morning, " + name); 31 | }, 32 | 33 | triggerOnAlarm: function() { 34 | /** 35 | * Trigger the event by specifing event name 36 | */ 37 | this.trigger('alarm', 'Ashwin'); 38 | }, 39 | 40 | triggerOffAlarm: function() { 41 | /** 42 | * Unsubscribe the event 43 | */ 44 | this.stopListening(this, 'alarm'); 45 | }, 46 | 47 | triggerOnce: function() { 48 | this.trigger('greeting', 'Ashwin'); 49 | } 50 | 51 | }); 52 | 53 | new MasterView(); 54 | 55 | })(); -------------------------------------------------------------------------------- /codes/Ch3_View_Events_Templates/README.md: -------------------------------------------------------------------------------- 1 | # Ch3 - Understanding Backbone View, Events, Templating 2 | 3 | ## View 4 | 5 | ### Example 1: 6 | * Create Backbone View 7 | * Create instance of Backbone View 8 | * Setting default `el` reference 9 | * Setting classname, id and tagname 10 | * Setting custom el reference 11 | 12 | ## Templating 13 | 14 | ### Example 1: 15 | * Setting DOM reference using `el` 16 | * Compiling Underscore template 17 | * Injecting data to template 18 | * Using this.$el to render template 19 | 20 | ### Example 2: 21 | * Using model for data 22 | * Using model instance from within view constructor 23 | * Parsing data in model 24 | * Rendering underscore template 25 | 26 | ### Example 3: 27 | * Using model for data with id 28 | 29 | ## Events 30 | 31 | ### Example 1: 32 | * Define events hash 33 | * Define event scope for View using el DOM reference 34 | 35 | ### Example 2: 36 | * Remove view from DOM. 37 | 38 | ### Example 3: 39 | * Subscribe/Unsubscribe a custom event 40 | * Subscribe a custom event onces 41 | * Trigger a subscribed event 42 | 43 | ### Example 4: 44 | * New way to Subscribe/Unsubscribe a custom event 45 | * New way to Subscribe a custom event onces 46 | * Trigger a subscribed event -------------------------------------------------------------------------------- /codes/Ch4_Collection/Examples/Example1/Example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: Backbone Collection 6 | 7 | 8 |

Ch 4: Understanding Backbone Collection

9 |

How to run this example?

10 |
    11 |
  1. Open Example-1.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 | 22 | 23 | 24 | 32 | 33 | 34 | 38 | 39 | 40 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /codes/Ch4_Collection/Examples/Example1/example-main-1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Create a Collection 5 | * 2. Passing Model to Collection 6 | * 3. Setting build-in Collection events 7 | * 4. Add/Remove Model from collection at the end 8 | * 5. Add/Remove Model from collection at the start 9 | * 6. Get the length of collection 10 | */ 11 | 12 | var MasterModel = Backbone.Model.extend({ 13 | /** 14 | * `initialize` is a constructor function which gets called automatically at 15 | * the time of instance creation 16 | */ 17 | initialize: function() { 18 | console.log("Your model have been initialize"); 19 | } 20 | }); 21 | 22 | var MasterCollection = Backbone.Collection.extend({ 23 | initialize: function() { 24 | console.log("Your collection have been initialize."); 25 | 26 | /** 27 | * Subscribe collection events 28 | */ 29 | this.listenTo(this, 'add', this.onModelAdded); 30 | this.listenTo(this, 'remove', this.onModelRemoved); 31 | }, 32 | 33 | /** 34 | * Used to specify the model class that the collection contains. 35 | */ 36 | model: MasterModel, 37 | 38 | onModelAdded: function() { 39 | console.log("Add model event got fired"); 40 | }, 41 | 42 | onModelRemoved: function() { 43 | console.log("Remove model event got fired"); 44 | } 45 | }); 46 | 47 | var masterCollection = new MasterCollection(); 48 | 49 | /** 50 | * Add a model (or an array of models) to the collection. 51 | * Firing an "add" event. 52 | */ 53 | masterCollection.add(new MasterModel({ 54 | name: 'Ashwin Hegde' 55 | })); 56 | masterCollection.add(new MasterModel({ 57 | name: 'Vinayak Patil' 58 | })); 59 | masterCollection.add(new MasterModel({ 60 | name: 'Pavan Solanki' 61 | })); 62 | 63 | /** 64 | * Display the data currently added in the collection. 65 | */ 66 | console.log("Data in Collection :: Add ") 67 | console.log(masterCollection.toJSON()); 68 | 69 | /** 70 | * Remove a model (or an array of models) from the collection. Fires a "remove" event, 71 | * 72 | * `at` is used to get a model from a collection, specified by index. 73 | * Note: index starts from 0 74 | */ 75 | masterCollection.remove(masterCollection.at(1)); 76 | 77 | /** 78 | * Display the data after removing model from the collection. 79 | */ 80 | console.log("Remove data from Collection :: Remove ") 81 | console.log(masterCollection.toJSON()); 82 | 83 | /** 84 | * Collection maintains a length property, counting the number of models it contains. 85 | */ 86 | console.log("Collection length: " + masterCollection.length); 87 | 88 | /** 89 | * Add a model at the end of a collection. 90 | */ 91 | masterCollection.push(new MasterModel({ 92 | name: 'Kumar Kundan' 93 | })); 94 | 95 | /** 96 | * Display the data currently added in the collection. 97 | */ 98 | console.log("Data in Collection :: Push"); 99 | console.log(masterCollection.toJSON()); 100 | 101 | /** 102 | * Remove and return the last model from a collection 103 | */ 104 | masterCollection.pop(); 105 | 106 | /** 107 | * Display the data after removing last model from the collection. 108 | */ 109 | console.log("Data in Collection :: POP"); 110 | console.log(masterCollection.toJSON()); 111 | 112 | /** 113 | * Add a model at the beginning of a collection. 114 | */ 115 | masterCollection.unshift(new MasterModel({ 116 | name: 'Ajay Sajwan' 117 | })); 118 | 119 | /** 120 | * Display the data currently added in the collection. 121 | */ 122 | console.log("Data in Collection :: unshift"); 123 | console.log(masterCollection.toJSON()); 124 | 125 | /** 126 | * Remove and return the first model from a collection. 127 | */ 128 | masterCollection.shift(); 129 | 130 | /** 131 | * Display the data after removing first model from the collection. 132 | */ 133 | console.log("Data in Collection :: Shift"); 134 | console.log(masterCollection.toJSON()); 135 | 136 | })(); -------------------------------------------------------------------------------- /codes/Ch4_Collection/Examples/Example2/Example-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 2: Backbone Collection 6 | 7 | 8 |

Ch 4: Understanding Backbone Collection

9 |

How to run this example?

10 |
    11 |
  1. Open Example-2.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 | 22 | 23 | 24 | 32 | 33 | 34 | 38 | 39 | 40 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /codes/Ch4_Collection/Examples/Example2/example-main-2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Using pluck 5 | * 2. Using where 6 | */ 7 | 8 | var MasterModel = Backbone.Model.extend({}); 9 | 10 | var masterCollection = new Backbone.Collection([ 11 | {name: "Ashwin Hegde", job: "Software Engineer"}, 12 | {name: "Kumar Kundan", job: "Engineering Manager"}, 13 | {name: "Saju Sasidharan", job: "Team Lead"} 14 | ]); 15 | 16 | /** 17 | * Pluck an attribute from each model in the collection. 18 | */ 19 | var names = masterCollection.pluck("name"); 20 | /** 21 | * Data in Object format 22 | */ 23 | console.log("Data in Object format :: Pluck"); 24 | console.log(names); 25 | 26 | /** 27 | * Data in string format 28 | */ 29 | console.log("Data in String format :: Pluck") 30 | console.log(JSON.stringify(names)); 31 | 32 | /** 33 | * Return an array of all the models in a collection that match the passed attributes. 34 | * Useful for simple cases of filter. 35 | */ 36 | console.log(masterCollection.where({job: "Software Engineer"})); 37 | console.log(masterCollection.where({job: "Engineering Manager"})); 38 | console.log(masterCollection.where({job: "Team Lead"})); 39 | 40 | })(); 41 | -------------------------------------------------------------------------------- /codes/Ch4_Collection/Examples/Example3/Example-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 3: Backbone Collection 6 | 7 | 8 |

Ch 4: Understanding Backbone Collection

9 |

How to run this example?

10 |
    11 |
  1. Open Example-3.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 | 22 | 23 | 24 | 32 | 33 | 34 | 38 | 39 | 40 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /codes/Ch4_Collection/Examples/Example3/example-main-3.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Sorting data & respected events 5 | */ 6 | 7 | var MasterModel = Backbone.Model.extend({}); 8 | 9 | var MasterCollection = Backbone.Collection.extend({ 10 | initialize: function() { 11 | console.log("Your collection have been initialize."); 12 | }, 13 | 14 | model: MasterModel, 15 | 16 | comparator: function(sortby) { 17 | return (this._order_by === 'offers') ? sortby.get('offers') : sortby.id; 18 | }, 19 | 20 | order_by_offers: function() { 21 | this._order_by = 'offers'; 22 | this.sort(); 23 | }, 24 | 25 | order_by_default: function() { 26 | this._order_by = 'id'; 27 | this.sort(); 28 | }, 29 | 30 | _order_by: 'id' 31 | 32 | }); 33 | 34 | var masterCollection = new MasterCollection(); 35 | console.log(masterCollection); 36 | 37 | /** 38 | * This function will only display id & Offers in different sorted order. 39 | */ 40 | function dump(masterCollection) { 41 | masterCollection.each(function(object) { 42 | console.log("id:" + object.id + ' ' + "Offers:" + object.get('offers')); 43 | }); 44 | } 45 | 46 | masterCollection.add([{ 47 | id: 1, 48 | offers: 6 49 | }, { 50 | id: 2, 51 | offers: 11 52 | }, { 53 | id: 3, 54 | offers: 1 55 | }]); 56 | 57 | /* 58 | Passing object to dump file 59 | */ 60 | console.log("No Sorting: "); 61 | dump(masterCollection); 62 | 63 | console.log("\nSort by Offers: "); 64 | masterCollection.order_by_offers(); 65 | dump(masterCollection); 66 | 67 | console.log("\nSort by id (Default): "); 68 | masterCollection.order_by_default(); 69 | dump(masterCollection); 70 | 71 | })(); -------------------------------------------------------------------------------- /codes/Ch4_Collection/README.md: -------------------------------------------------------------------------------- 1 | # Ch3 - Understanding Backbone Collection 2 | 3 | ## Example 1: 4 | * Create a Collection 5 | * Passing Model to Collection 6 | * Setting build-in Collection events 7 | * Add/Remove Model from collection at the end 8 | * Add/Remove Model from collection at the start 9 | * Get the length of collection 10 | 11 | ## Example 2: 12 | * Using pluck 13 | * Using where 14 | 15 | ## Example 3: 16 | * Sorting data & respected events -------------------------------------------------------------------------------- /codes/Ch5_Router/Examples/Example1/Example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 1: Backbone Router 6 | 7 | 8 |

Ch 5: Understanding Backbone Router

9 |

How to run this example?

10 |
    11 |
  1. Open Example-1.html in browser.
    2. 12 |
  2. Press F12, go to console tab.
    3. 13 |
14 | 15 |
16 | Home
17 | About Us
18 | Search [Query='book', Page='7']
19 | Contact
20 | Page 8
21 | 117-a/b/c 22 |
23 | 24 | 31 | 32 | 33 | 41 | 42 | 43 | 47 | 48 | 49 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /codes/Ch5_Router/Examples/Example1/example-main-1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | /** 3 | * The goal of this file is to provide the basic understanding of 4 | * 1. Create a Router 5 | * 2. Backbone history 6 | * 3. Routes hash 7 | * 4. Simple route 8 | * 5. Route parameters 9 | * 6. Getting current route 10 | */ 11 | 12 | var MasterRouter = Backbone.Router.extend({ 13 | /** 14 | * `initialize` is a constructor function which gets called automatically at 15 | * the time of instance creation 16 | */ 17 | initialize: function() { 18 | console.log("Your router have been initialize"); 19 | 20 | /** 21 | * During page load, after your application has finished creating all of its routers, 22 | * be sure to call Backbone.history.start(), or 23 | * Backbone.history.start({pushState: true}) to route the initial URL. 24 | */ 25 | Backbone.history.start() 26 | 27 | /** 28 | * Manually create a route for the router, 29 | * The route argument may be a routing string or regular expression. 30 | */ 31 | // Matches #page/8, passing "8" 32 | this.route("page/:number", function(number) { 33 | console.log("Route Callback: Page/{number}"); 34 | console.log("Get @param{number}: " + number); 35 | }); 36 | 37 | // Matches /117-a/b/c/open, passing /117-a/b/c to open function. 38 | this.route(/^(.*?)\/open$/, "open"); 39 | 40 | }, 41 | 42 | /** 43 | * The routes hash maps URLs with parameters to functions on your router 44 | * (or just direct function definitions, if you prefer). 45 | */ 46 | routes: { 47 | "": "home", // #help 48 | "about": "about", // #about 49 | "search/:query/p:page": "search", // #search/book/p7 50 | "contact": function() { 51 | console.log("Route Callback: Contact Us"); 52 | this.getCurrentRoutes(); 53 | }, 54 | "help": "help" 55 | }, 56 | 57 | home: function() { 58 | console.log("Route Callback: Home"); 59 | this.getCurrentRoutes(); 60 | }, 61 | 62 | about: function() { 63 | console.log("Route Callback: About Us"); 64 | this.getCurrentRoutes(); 65 | }, 66 | 67 | search: function(query, page) { 68 | console.log("Route Callback: Search"); 69 | console.log(" => Search Query: " + query); 70 | console.log(" => Page No: " + page); 71 | }, 72 | 73 | open: function(id) { 74 | console.log("Route Callback: Open (Redirect to Help Callback)"); 75 | console.log("Get @param {id}: " + id); 76 | 77 | /** 78 | * Whenever you reach a point in your application that you'd like to save as a URL, 79 | * call navigate in order to update the URL. If you wish to also call the route function, 80 | * set the trigger option to true. 81 | * To update the URL without creating an entry in the browser's history, set the replace option to true. 82 | */ 83 | this.navigate("help", { 84 | trigger: true, 85 | replace: true 86 | }); 87 | }, 88 | 89 | help: function() { 90 | console.log("Route Callback: Help"); 91 | this.getCurrentRoutes(); 92 | }, 93 | 94 | getCurrentRoutes: function() { 95 | console.log("Backbone History Fragment (Current Route): " + Backbone.history.fragment); 96 | } 97 | }); 98 | 99 | new MasterRouter(); 100 | 101 | })(); -------------------------------------------------------------------------------- /codes/Ch5_Router/README.md: -------------------------------------------------------------------------------- 1 | # Ch5 - Understanding Backbone Router 2 | 3 | ## Example 1: 4 | * Create a Router 5 | * Backbone history 6 | * Routes hash 7 | * Simple route 8 | * Route parameters 9 | * Getting current route -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example1/Example-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Under Training Session 5: Application Example 1 6 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Structuring your web apps via Backbone.JS

17 |
18 |
19 |

Part of Extended Training Session: Application Example 1

20 |
21 |
22 |

Scope of the Application

23 |
    24 |
  1. Perform read operation (CRUD, R = Read) on data.
    2. 25 |
26 |
27 |
28 |
29 | 30 |
31 | 32 | 33 | 62 |
63 |
64 | 65 | 72 | 73 | 74 | 82 | 83 | 84 | 91 | 92 | 93 | 97 | 98 | 99 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example1/example-main-1.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | /* 4 | The goal of this file is to provide the basic understanding 5 | 1. Understanding how to integrate Backbone's Collection, Model & View. 6 | 2. Understanding how to use Underkscore's micro-templating feature. 7 | 3. Perform read operation (CRUD, R = Read) on data. 8 | */ 9 | 10 | /* 11 | This is JavaScript object holding some amount of data used for data-manipulation. 12 | */ 13 | var people = [ 14 | { name: "ABC", address: "Pune, India", tel: "0123456789", email: "abc@cybage.com", type: "family" }, 15 | { name: "PQR", address: "Canada, USA", tel: "0123456987", email: "pqr@blackberry.com", type: "friend" }, 16 | { name: "XYZ", address: "Mumbai, India", tel: "0123456584", email: "xyz@infosys.com", type: "family" }, 17 | { name: "DEF", address: "New York, USA", tel: "0123465645", email: "def@wipro.com", type: "colleague" }, 18 | { name: "GHI", address: "New York, USA", tel: "0123465645", email: "ghi@wipro.com", type: "family" } 19 | ]; 20 | 21 | /* 22 | Creating a new model called Contact by extending Backbone.Model class. 23 | */ 24 | var Contact = Backbone.Model.extend({ 25 | /* 26 | These are various attributes that will be set by default when the model gets created. 27 | */ 28 | defaults: { 29 | photo: "../../../img/placeholder.png", 30 | name: "", 31 | address: "", 32 | tel: "", 33 | email: "", 34 | type: "" 35 | } 36 | }); 37 | 38 | /* 39 | Creating a new collection called Contacts by extending Backbone.Collection class. 40 | */ 41 | var Contacts = Backbone.Collection.extend({ 42 | /* 43 | Used to specify the model class that the collection contains. 44 | */ 45 | model: Contact 46 | }); 47 | 48 | /* 49 | Creating a new view called ContactView by extending Backbone.View class. 50 | */ 51 | var ContactView = Backbone.View.extend({ 52 | /* 53 | tagName & className property will create following HTML markup. 54 |
55 | */ 56 | 57 | className: "contact-container", 58 | 59 | template: _.template($("#contactTemplate").html()), 60 | 61 | render: function () { 62 | console.log("Model data 1 by 1: "); 63 | console.log(this.model.toJSON()); 64 | /* 65 | Passing the model data to template and then to this.$el.html which has article tag. 66 | Thus, the updated template with all the data rendered gets appended to article tag. 67 | */ 68 | this.$el.html(this.template(this.model.toJSON())); 69 | return this; 70 | } 71 | 72 | }); 73 | 74 | /* 75 | Creating a new view called DirectoryView by extending Backbone.View class. 76 | */ 77 | var ContactsView = Backbone.View.extend({ 78 | 79 | el: $("#contacts"), 80 | 81 | /* 82 | This initialize function will get called when the view is first created. 83 | */ 84 | initialize: function () { 85 | /* 86 | Creating an object from Contacts which calls initialize function. 87 | */ 88 | this.collection = new Contacts(people); 89 | 90 | this.render(); 91 | 92 | this.collection.on("reset", this.render, this); 93 | this.collection.on("add", this.renderContact, this); 94 | }, 95 | 96 | render: function () { 97 | _.each(this.collection.models, function (item) { 98 | this.renderContact(item); 99 | }, this); 100 | }, 101 | 102 | renderContact: function (item) { 103 | /* 104 | Creating an object from ContactView which calls initialize function. 105 | 106 | Passing the model to ContactView. 107 | */ 108 | var contactView = new ContactView({ 109 | model: item 110 | }); 111 | 112 | /* 113 | Calling the render function and getting the updated el content and 114 | append it to this.$el which content div#contacts. 115 | */ 116 | this.$el.append(contactView.render().el); 117 | } 118 | 119 | }); 120 | 121 | /* 122 | Creating an object from DirectoryView which calls initialize function. 123 | */ 124 | var contacts = new ContactsView(); 125 | 126 | } (jQuery)); -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example2/Example-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Under Training Session 5: Application Example 2 6 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Structuring your web apps via Backbone.JS

17 |
18 |
19 |

Part of Extended Training Session: Application Example 2

20 |
21 |
22 |

Scope of Application

23 |
    24 |
  1. Perform Create operation (CRUD, C = Create) on data
    2. 25 |
26 |
27 |
28 |
29 | 30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 | 42 | 43 | 72 | 73 |
74 |
75 | 76 | 83 | 84 | 85 | 93 | 94 | 95 | 102 | 103 | 104 | 108 | 109 | 110 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example2/example-main-2.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | /* 4 | The goal of this file is to provide the basic understanding 5 | 1. Perform Create operation (CRUD, C = Create) on data. 6 | */ 7 | 8 | /* 9 | This is JavaScript object holding some amount of data used for data-manipulation. 10 | */ 11 | var people = [ 12 | { name: "ABC", address: "Pune, India", tel: "0123456789", email: "abc@cybage.com", type: "family" }, 13 | { name: "PQR", address: "Canada, USA", tel: "0123456987", email: "pqr@blackberry.com", type: "friend" }, 14 | { name: "XYZ", address: "Mumbai, India", tel: "0123456584", email: "xyz@infosys.com", type: "family" }, 15 | { name: "DEF", address: "New York, USA", tel: "0123465645", email: "def@wipro.com", type: "colleague" }, 16 | { name: "GHI", address: "New York, USA", tel: "0123465645", email: "ghi@wipro.com", type: "family" } 17 | ]; 18 | 19 | /* 20 | Creating a new model called Contact by extending Backbone.Model class. 21 | */ 22 | var Contact = Backbone.Model.extend({ 23 | /* 24 | This initialize function will get called when the model is first created. 25 | */ 26 | initialize: function() { 27 | console.log("Contact model got initialized"); 28 | }, 29 | 30 | /* 31 | These are various attributes that will be set by default when the model gets created. 32 | */ 33 | defaults: { 34 | photo: "../../../img/placeholder.png", 35 | name: "", 36 | address: "", 37 | tel: "", 38 | email: "", 39 | type: "" 40 | } 41 | }); 42 | 43 | /* 44 | Creating a new collection called Contacts by extending Backbone.Collection class. 45 | */ 46 | var Contacts = Backbone.Collection.extend({ 47 | /* 48 | This initialize function will get called when the collection is first created. 49 | */ 50 | initialize: function() { 51 | console.log("Contacts collection got initialized"); 52 | }, 53 | /* 54 | Used to specify the model class that the collection contains. 55 | */ 56 | model: Contact 57 | }); 58 | 59 | /* 60 | Creating a new view called ContactView by extending Backbone.View class. 61 | */ 62 | var ContactView = Backbone.View.extend({ 63 | /* 64 | This initialize function will get called when the view is first created. 65 | */ 66 | initialize: function() { 67 | console.log("ContactView view got initialized"); 68 | }, 69 | 70 | /* 71 | tagName & className property will create following HTML markup. 72 |
73 | */ 74 | tagName: "article", 75 | className: "contact-container", 76 | 77 | template: _.template($("#contactTemplate").html()), 78 | 79 | render: function () { 80 | /* 81 | Passing the model data to template and then to this.$el.html which has article tag. 82 | Thus, the updated template with all the data rendered gets appended to article tag. 83 | */ 84 | this.$el.html(this.template(this.model.toJSON())); 85 | return this; 86 | } 87 | 88 | }); 89 | 90 | /* 91 | Creating a new view called DirectoryView by extending Backbone.View class. 92 | */ 93 | var ContactsView = Backbone.View.extend({ 94 | 95 | el: $("#contacts"), 96 | 97 | /* 98 | This initialize function will get called when the view is first created. 99 | */ 100 | initialize: function () { 101 | /* 102 | Creating an object from Contacts which calls initialize function. 103 | */ 104 | this.collection = new Contacts(people); 105 | 106 | this.render(); 107 | 108 | /* 109 | This event gets fired when a model is added. 110 | */ 111 | this.collection.on("add", this.renderContact, this); 112 | }, 113 | 114 | /* 115 | Event hash will handle all the event listener. 116 | */ 117 | events: { 118 | "click #add": "addContact" 119 | }, 120 | 121 | /* 122 | This method gets fired when add button is clicked. 123 | */ 124 | addContact: function (e) { 125 | e.preventDefault(); 126 | 127 | var formData = {}; 128 | $("#addContact").children("input").each(function (i, el) { 129 | if ($(el).val() !== "") { 130 | formData[el.id] = $(el).val(); 131 | } 132 | }); 133 | 134 | /* 135 | Used to push form data object to people object. 136 | */ 137 | people.push(formData); 138 | 139 | /* 140 | This will fire add event. 141 | */ 142 | this.collection.add(new Contact(formData)); 143 | 144 | }, 145 | 146 | render: function () { 147 | _.each(this.collection.models, function (item) { 148 | this.renderContact(item); 149 | }, this); 150 | }, 151 | 152 | renderContact: function (item) { 153 | /* 154 | Creating an object from ContactView which calls initialize function. 155 | 156 | Passing the model to ContactView. 157 | */ 158 | var contactView = new ContactView({ 159 | model: item 160 | }); 161 | 162 | /* 163 | Calling the render function and getting the updated el content and 164 | append it to this.$el which content div#contacts. 165 | */ 166 | this.$el.append(contactView.render().el); 167 | } 168 | 169 | }); 170 | 171 | /* 172 | Creating an object from DirectoryView which calls initialize function. 173 | */ 174 | var contacts = new ContactsView(); 175 | 176 | } (jQuery)); -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example3/Example-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Under Training Session 5: Application Example 3 6 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Structuring your web apps via Backbone.JS

17 |
18 |
19 |

Part of Extended Training Session: Application Example 3

20 |
21 |
22 |

Scope of Application

23 |
    24 |
  1. Perform Delete operation (CRUD, D = Delete) on data
    2. 25 |
26 |
27 |
28 |
29 | 30 |
31 | 32 | 33 | 67 |
68 |
69 | 70 | 77 | 78 | 79 | 87 | 88 | 89 | 96 | 97 | 98 | 102 | 103 | 104 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example3/example-main-3.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | /* 4 | The goal of this file is to provide the basic understanding 5 | 1. Perform Delete operation (CRUD, D = Delete) on data. 6 | */ 7 | 8 | /* 9 | This is JavaScript object holding some amount of data used for data-manipulation. 10 | */ 11 | var people = [ 12 | { name: "ABC", address: "Pune, India", tel: "0123456789", email: "abc@cybage.com", type: "family" }, 13 | { name: "PQR", address: "Canada, USA", tel: "0123456987", email: "pqr@blackberry.com", type: "friend" }, 14 | { name: "XYZ", address: "Mumbai, India", tel: "0123456584", email: "xyz@infosys.com", type: "family" }, 15 | { name: "DEF", address: "New York, USA", tel: "0123465645", email: "def@wipro.com", type: "colleague" }, 16 | { name: "GHI", address: "New York, USA", tel: "0123465645", email: "ghi@wipro.com", type: "family" } 17 | ]; 18 | 19 | /* 20 | Creating a new model called Contact by extending Backbone.Model class. 21 | */ 22 | var Contact = Backbone.Model.extend({ 23 | /* 24 | These are various attributes that will be set by default when the model gets created. 25 | */ 26 | defaults: { 27 | photo: "../../../img/placeholder.png", 28 | name: "", 29 | address: "", 30 | tel: "", 31 | email: "", 32 | type: "" 33 | } 34 | }); 35 | 36 | /* 37 | Creating a new collection called Contacts by extending Backbone.Collection class. 38 | */ 39 | var Contacts = Backbone.Collection.extend({ 40 | /* 41 | Used to specify the model class that the collection contains. 42 | */ 43 | model: Contact 44 | }); 45 | 46 | /* 47 | Creating a new view called ContactView by extending Backbone.View class. 48 | */ 49 | var ContactView = Backbone.View.extend({ 50 | /* 51 | tagName & className property will create following HTML markup. 52 |
53 | */ 54 | className: "contact-container", 55 | 56 | /* 57 | Template for display mode. 58 | */ 59 | template: _.template($("#contactTemplate").html()), 60 | 61 | /* 62 | Event hash will handle all the event listener. 63 | */ 64 | events: { 65 | "click button.delete": "deleteContact" 66 | }, 67 | 68 | /* 69 | This method will get fired when user clicks delete button. 70 | */ 71 | deleteContact: function () { 72 | // remove view from page 73 | this.remove(); 74 | }, 75 | 76 | /* 77 | This method will have all the rendering process. 78 | */ 79 | render: function () { 80 | /* 81 | Passing the model data to template and then to this.$el.html which has article tag. 82 | Thus, the updated template with all the data rendered gets appended to article tag. 83 | */ 84 | this.$el.html(this.template(this.model.toJSON())); 85 | return this; 86 | } 87 | 88 | }); 89 | 90 | /* 91 | Creating a new view called DirectoryView by extending Backbone.View class. 92 | */ 93 | var ContactsView = Backbone.View.extend({ 94 | 95 | el: $("#contacts"), 96 | 97 | /* 98 | This initialize function will get called when the view is first created. 99 | */ 100 | initialize: function () { 101 | /* 102 | Creating an object from Contacts which calls initialize function. 103 | */ 104 | this.collection = new Contacts(people); 105 | 106 | this.render(); 107 | 108 | this.collection.on("reset", this.render, this); 109 | this.collection.on("add", this.renderContact, this); 110 | }, 111 | 112 | render: function () { 113 | _.each(this.collection.models, function (item) { 114 | this.renderContact(item); 115 | }, this); 116 | }, 117 | 118 | renderContact: function (item) { 119 | /* 120 | Creating an object from ContactView which calls initialize function. 121 | 122 | Passing the model to ContactView. 123 | */ 124 | var contactView = new ContactView({ 125 | model: item 126 | }); 127 | 128 | /* 129 | Calling the render function and getting the updated el content and 130 | append it to this.$el which content div#contacts. 131 | */ 132 | this.$el.append(contactView.render().el); 133 | } 134 | 135 | }); 136 | 137 | /* 138 | Creating an object from DirectoryView which calls initialize function. 139 | */ 140 | var contacts = new ContactsView(); 141 | 142 | } (jQuery)); -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example4/Example-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Under Training Session 5: Application Example 4 6 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Structuring your web apps via Backbone.JS

17 |
18 |
19 |

Part of Extended Training Session: Application Example 4

20 |
21 |
22 |

Scope of Application

23 |
    24 |
  1. Perform Edit/Save operation (CRUD, U = Update) on data
    2. 25 |
26 |
27 |
28 |
29 | 30 |
31 | 32 | 33 | 67 | 68 | 69 | 102 |
103 |
104 | 105 | 112 | 113 | 114 | 122 | 123 | 124 | 131 | 132 | 133 | 137 | 138 | 139 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example4/example-main-4.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | /* 4 | The goal of this file is to provide the basic understanding 5 | 1. Perform Edit/Save operation (CRUD, U = Update) on data. 6 | */ 7 | 8 | /* 9 | This is JavaScript object holding some amount of data used for data-manipulation. 10 | */ 11 | var people = [ 12 | { name: "ABC", address: "Pune, India", tel: "0123456789", email: "abc@cybage.com", type: "family" }, 13 | { name: "PQR", address: "Canada, USA", tel: "0123456987", email: "pqr@blackberry.com", type: "friend" }, 14 | { name: "XYZ", address: "Mumbai, India", tel: "0123456584", email: "xyz@infosys.com", type: "family" }, 15 | { name: "DEF", address: "New York, USA", tel: "0123465645", email: "def@wipro.com", type: "colleague" }, 16 | { name: "GHI", address: "New York, USA", tel: "0123465645", email: "ghi@wipro.com", type: "family" } 17 | ]; 18 | 19 | /* 20 | Creating a new model called Contact by extending Backbone.Model class. 21 | */ 22 | var Contact = Backbone.Model.extend({ 23 | /* 24 | These are various attributes that will be set by default when the model gets created. 25 | */ 26 | defaults: { 27 | photo: "../../../img/placeholder.png", 28 | name: "", 29 | address: "", 30 | tel: "", 31 | email: "", 32 | type: "" 33 | } 34 | }); 35 | 36 | /* 37 | Creating a new collection called Contacts by extending Backbone.Collection class. 38 | */ 39 | var Contacts = Backbone.Collection.extend({ 40 | /* 41 | Used to specify the model class that the collection contains. 42 | */ 43 | model: Contact 44 | }); 45 | 46 | /* 47 | Creating a new view called ContactView by extending Backbone.View class. 48 | */ 49 | var ContactView = Backbone.View.extend({ 50 | /* 51 | tagName & className property will create following HTML markup. 52 |
53 | */ 54 | className: "contact-container", 55 | 56 | /* 57 | Template for display mode. 58 | */ 59 | template: _.template($("#contactTemplate").html()), 60 | 61 | /* 62 | Template for edit mode. 63 | */ 64 | editTemplate: _.template($("#contactEditTemplate").html()), 65 | 66 | /* 67 | Event hash will handle all the event listener. 68 | */ 69 | events: { 70 | "click button.edit": "editContact", 71 | "click button.save": "saveEdits", 72 | "click button.cancel": "cancelEdit" 73 | }, 74 | 75 | /* 76 | This method will get fired when user clicks edit button. 77 | The goal is to switch to display mode to edit mode. 78 | */ 79 | editContact: function () { 80 | this.$el.html(this.editTemplate(this.model.toJSON())); 81 | }, 82 | 83 | /* 84 | This method will get fired when user clicks save button. 85 | The goal is to switch to edit mode to display mode WITH saving updated data. 86 | */ 87 | saveEdits: function (e) { 88 | e.preventDefault(); 89 | 90 | var formData = {}, 91 | prev = this.model.previousAttributes(); 92 | 93 | // get form data 94 | $(e.target).closest("form").find(":input").not("button").each(function () { 95 | var el = $(this); 96 | formData[el.attr("class")] = el.val(); 97 | }); 98 | 99 | // update model 100 | this.model.set(formData); 101 | 102 | // render view 103 | this.render(); 104 | 105 | // update contacts array 106 | _.each(contacts, function (contact) { 107 | if (_.isEqual(contact, prev)) { 108 | contacts.splice(_.indexOf(contacts, contact), 1, formData); 109 | } 110 | }); 111 | }, 112 | 113 | /* 114 | This method will get fired when user clicks cancel button. 115 | The goal is to switch to edit mode to display mode WITHOUT saving data. 116 | */ 117 | cancelEdit: function () { 118 | this.render(); 119 | }, 120 | 121 | /* 122 | This method will have all the rendering process. 123 | */ 124 | render: function () { 125 | /* 126 | Passing the model data to template and then to this.$el.html which has article tag. 127 | Thus, the updated template with all the data rendered gets appended to article tag. 128 | */ 129 | this.$el.html(this.template(this.model.toJSON())); 130 | return this; 131 | } 132 | 133 | }); 134 | 135 | /* 136 | Creating a new view called DirectoryView by extending Backbone.View class. 137 | */ 138 | var ContactsView = Backbone.View.extend({ 139 | 140 | el: $("#contacts"), 141 | 142 | /* 143 | This initialize function will get called when the view is first created. 144 | */ 145 | initialize: function () { 146 | /* 147 | Creating an object from Contacts which calls initialize function. 148 | */ 149 | this.collection = new Contacts(people); 150 | 151 | this.render(); 152 | 153 | this.collection.on("reset", this.render, this); 154 | this.collection.on("add", this.renderContact, this); 155 | }, 156 | 157 | render: function () { 158 | _.each(this.collection.models, function (item) { 159 | this.renderContact(item); 160 | }, this); 161 | }, 162 | 163 | renderContact: function (item) { 164 | /* 165 | Creating an object from ContactView which calls initialize function. 166 | 167 | Passing the model to ContactView. 168 | */ 169 | var contactView = new ContactView({ 170 | model: item 171 | }); 172 | 173 | /* 174 | Calling the render function and getting the updated el content and 175 | append it to this.$el which content div#contacts. 176 | */ 177 | this.$el.append(contactView.render().el); 178 | } 179 | 180 | }); 181 | 182 | /* 183 | Creating an object from DirectoryView which calls initialize function. 184 | */ 185 | var contacts = new ContactsView(); 186 | 187 | } (jQuery)); -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example5/Example-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Under Training Session 5: Application Example 5 6 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Structuring your web apps via Backbone.JS

17 |
18 |
19 |

Part of Extended Training Session: Application Example 5

20 |
21 |
22 |

Scope of Application

23 |
    24 |
  1. Perform routing operation based on type
    2. 25 |
26 |
27 |
28 |
29 | 30 |
31 |
32 |
33 |
34 |
35 | 36 | 37 | 66 | 67 |
68 |
69 | 70 | 77 | 78 | 79 | 87 | 88 | 89 | 96 | 97 | 98 | 102 | 103 | 104 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /codes/Ch6_Extended-Session/Application Examples/Example5/example-main-5.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | /* 4 | The goal of this file is to provide the basic understanding 5 | 1. Understanding how Backbone Router works. 6 | */ 7 | 8 | /* 9 | This is JavaScript object holding some amount of data used for data-manipulation. 10 | */ 11 | var people = [ 12 | { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }, 13 | { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }, 14 | { name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" }, 15 | { name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" }, 16 | { name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" }, 17 | { name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "colleague" }, 18 | { name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "friend" }, 19 | { name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "anemail@me.com", type: "family" } 20 | ]; 21 | 22 | /* 23 | Creating a new model called Contact by extending Backbone.Model class. 24 | */ 25 | var Contact = Backbone.Model.extend({ 26 | defaults: { 27 | photo: "../../../img/placeholder.png", 28 | name: "", 29 | address: "", 30 | tel: "", 31 | email: "", 32 | type: "" 33 | } 34 | }); 35 | 36 | /* 37 | Creating a new collection called Contacts by extending Backbone.Collection class. 38 | */ 39 | var Contacts = Backbone.Collection.extend({ 40 | model: Contact 41 | }); 42 | 43 | /* 44 | Creating a new view called ContactView by extending Backbone.View class. 45 | */ 46 | var ContactView = Backbone.View.extend({ 47 | tagName: "article", 48 | className: "contact-container", 49 | template: _.template($("#contactTemplate").html()), 50 | 51 | render: function () { 52 | this.$el.html(this.template(this.model.toJSON())); 53 | return this; 54 | } 55 | }); 56 | 57 | /* 58 | Creating a new view called ContactsView by extending Backbone.View class. 59 | */ 60 | var ContactsView = Backbone.View.extend({ 61 | el: $("#contacts"), 62 | 63 | /* 64 | This initialize function will get called when the view is first created. 65 | */ 66 | initialize: function () { 67 | /* 68 | Creating an object from Contacts which calls initialize function. 69 | */ 70 | this.collection = new Contacts(people); 71 | 72 | this.render(); 73 | this.$el.find("#filter").append(this.createSelect()); 74 | 75 | this.on("change:filterType", this.filterByType, this); 76 | this.collection.on("reset", this.render, this); 77 | this.collection.on("add", this.renderContact, this); 78 | 79 | }, 80 | 81 | render: function () { 82 | this.$el.find("article").remove(); 83 | 84 | _.each(this.collection.models, function (item) { 85 | this.renderContact(item); 86 | }, this); 87 | }, 88 | 89 | renderContact: function (item) { 90 | /* 91 | Creating an object from ContactView which calls initialize function. 92 | Passing the model to ContactView. 93 | */ 94 | var contactView = new ContactView({ 95 | model: item 96 | }); 97 | 98 | /* 99 | Calling the render function and getting the updated el content and 100 | append it to this.$el which content div#contacts. 101 | */ 102 | this.$el.append(contactView.render().el); 103 | }, 104 | 105 | // Pluck the type from the object people. 106 | getTypes: function () { 107 | return _.uniq(this.collection.pluck("type"), false, function (type) { 108 | return type.toLowerCase(); 109 | }); 110 | }, 111 | 112 | /* 113 | Create a select html tag and fillup it with options & values. 114 | */ 115 | createSelect: function () { 116 | var filter = this.$el.find("#filter"), 117 | select = $("