Date post: | 03-Aug-2015 |
Category: |
Software |
Upload: | joseph-khan |
View: | 128 times |
Download: | 2 times |
RoadmapTotal Time: 3 hours
1. What is MVC?2. What are SPA’s?3. Discuss about developing web applications, separation of concerns, traditional way of developing and how Backbone gives structure4. Backbone dependencies – jQuery, Underscore5. Setup needed to code – local server, libraries, editor6. Backbone Core Components
ModelViewsCollectionsControllers?EventsRouters
7. Live Demo App – Employee Manager Single Page Application8. Questions and Quiz9. References – links and books
Tools needed
What do I need to code?
1. Local HTTP server – WAMP/MAMP2. Text/Code editor – I prefer Sublime Text3. JS libraries
1. Backbone.js2. jQuery.js3. Underscore.js
4. Some patience
What is a Single Page Application?Once the application loads, majority of the functionality is handled client side only.Calls are made to the server for data feeds.Eg. Gmail, Our Demo App
ModelsModel data for a real world entity. Its like a database row. They contain data for an application as well as the logic around the data.Eg. Todo Item, an Employee
var EmployeeModel = Backbone.Model.extend({});
var employeeModel = new EmployeeModel();
• Initialization• Setting default values• Getters and Setters• Data Validation• Handling change events• Some other very useful model properties – toJSON(), attributes, save()
CollectionsGroup or set of models. Its like the database table Eg. Todo List, Employee List
var EmployeeCollection = Backbone.Collection.extend({url: “…”,model: EmployeeModel,initialize: function() {},parse: function(response) {}
});
var employees = new EmployeeCollection();
• Creating a collection class• url property• model property• parse() method• Creating a collection instance• Adding and removing models• Add, remove, reset events• fetch() method• Other useful properties – get(),
forEach()
Templates (basics)• Makes life easier. Converts user data into HTML markup• We will use Underscore templates _.template()
<script type="text/template" id="todoTemplate"><p class='todo-title'><%= title %></p><p><%= completed %></p>
</script>
JSON data/Model Data
HTML markup
{ title: ‘Get Eggs’, completed: false}
<p class='todo-title’>Get Eggs</p><p>false</p>
Views• Views in Backbone don’t contain the HTML markup for your application; they contain the• logic behind the presentation of the model’s data to the user. • They use templates to do so
var EmployeeView = Backbone.View.extend({tagName: 'li',className: 'employeeItem row’,events: {
'click #removeBtn' : 'removeEmployee'
},initialize: function() {
console.log("Employee View initialized");
},render: function() {},removeEmployee: function() {}
});
var employee1 = new EmployeeView();
• Creating a View class• Associating views with DOM elements –
el, tagName• initialize() method• render() method• Events hash map – DOM events• Listening to model changes• Creating a view object• Passing model to a view• Converting model data into HTML markup• el, $el properties
EventsTwo ways to handle events• DOM level events – hashmap• Object level events – one object listening to another object
var EmployeeView = Backbone.View.extend({tagName: 'li',className: 'employeeItem row’,events: {
'click #removeBtn' : 'removeEmployee'
},initialize: function() {
this.listenTo(this.model, ‘change’, someFunc)
},removeEmployee: function() {}
});
var employee1 = new EmployeeView();
• on()• off()• trigger()• listenTo()• stopListening()• events: {} object
Books and LinksOfficial Site - http://backbonejs.org/
Tutorial - https://backbonetutorials.com/
Free ebook - http://addyosmani.github.io/backbone-fundamentals/
Backbone Todo App - http://todomvc.com/examples/backbone/
Developing Backbone.js Applications by Addy Osmani