Handling DOM events in Backbone.js and working with Collections
Posted by: Mahesh Sabnis ,
on 3/24/2014,
in
Category Backbone.js
Abstract: The Backbone.js library allows you to develop responsive web applications with clear separation of Model and View. DOM Events associated with Collection helps to notify the UI elements about Updates and accordingly to display refreshed data
Backbone.js is a lightweight JavaScript library loosely based on the Model-View-Controller (MVC) pattern (it’s not an MVC framework) and it allows developers to create single-page web applications. We covered some basics of Backbone in a previous article Getting Started with Backbone.js and Rendering a Collection using View
To manage data of web applications, Backbone provides a Model creation strategy. The model allows us to define properties to contain data and business logic. The Collection declaration allows to store collection of the data, which is later used by the View.
In Backbone, the View (UI) is generally rendered using HTML Templates, and elements declared in this Template are accessible to View, but it might be possible that the HTML page (or MVC view or .aspx) already contains HTML elements and you need to handle the DOM events for these elements. The question then is how to handle them? In the following implementation, we will see that the ‘click’ event for the html button element is handled inside the View object. The method which gets executed for the click event is used to add the model object into the collection and then the collection is rendered using HTML Table.
Step 1: Open Visual Studio 2012/2013 or any Editor of your choice and create a new web application (an empty ASP.NET app if you are using Visual Studio). In this project, add Backbone and jQuery libraries using the NuGet Package.
Step 2: Add a new folder and name it as ‘Backbone_Custom_Scripts’. In this folder, add a new JavaScript file and name it as Model.js. Define the following Model and Collection objects in Model.js
var Employee = Backbone.Model.extend({
defaults: {
EmpNo: 0,
EmpName: "",
DeptName: "",
Designation:"",
Salary:0.0
}
});
//Declaring Employee Collection
var EmployeesCollection = Backbone.Collection.extend({
model: Employee
});
Step 3: Add a new HTML page in the project and name it as ‘H4_Adding_Data_To_Collection_DOM_Events.html’ or anything simpler. Add the following script reference in it:
<script src="Scripts/jquery-2.0.3.min.js"></script>
< script src="Scripts/underscore.min.js"></script>
< script src="Scripts/backbone.min.js"></script>
< script src="Backcone_Custom_Scripts/Models.js"></script>
Step 4: In the <body> tag of the page, add a <table> and in the table add Textboxes and Buttons. Add a <div> tag below the table to render collection:
<table style="width:100%;" id="tblinput">
< tr>
<td>EmpNo:</td>
<td>
<input type="text" id="txteno" placeholder="EmpNo is Numeric" />
</td>
< /tr>
< tr>
<td>EmpName:</td>
<td>
<input type="text" id="txtename" placeholder="EmpName is Text" />
</td>
< /tr>
< tr>
<td>DeptName:</td>
<td>
<input type="text" id="txtdname" placeholder="DeptName is Text" />
</td>
< /tr>
< tr>
<td>Designation:</td>
<td>
<input type="text" id="txtdesig" placeholder="Designation is Text" />
</td>
< /tr>
< tr>
<td>Salary:</td>
<td>
<input type="text" id="txtsal" placeholder="Salary is Numeric" />
</td>
< /tr>
< tr>
<td>
<button id="btnadd">Add</button>
</td>
<td>
<button id="btnclear">Clear</button>
</td>
<td>
<input type="checkbox" id="ckbksort" value="Sory by Name" />
</td>
< /tr>
< /table>
< div id="dvcontainer"></div>
Step 5: Add the script in the <body> tag below the <div> with id ‘dvcontainer’, This will define the View object as shown here:
var EmployeeRecordsView = Backbone.View.extend({
//The body element in which all elements are displayed
el: 'body',
//Events for the elements on the page.
events:{
'click button#btnadd': 'addData',
'click button#btnclear': 'clearInput'
},
//Render function to display collection collection in the Table
render: function () {
var dvcontainer = $(this.el).find('#dvcontainer');
var viewHtml = '<table border="1">';
viewHtml += "<tr><td>EmpNo</td><td>EmpName</td><td>DeptName</td><td>Designation</td> <td>Salary</td></tr>";
//Iterate through the collection
_.each(this.collection.models, function (m, i, l) {
var empRecHtml = '<tr><td>' + m.get('EmpNo') + '</td><td>' + m.get('EmpName') + '</td><td>' + m.get('DeptName') + '</td><td>' + m.get('Designation') + '</td><td>' + m.get('Salary') + '</td></tr>';
viewHtml += empRecHtml;
});
viewHtml += '</table>';
dvcontainer.html(viewHtml);
},
//Function executed on the button clieck
addData: function () {
var newEmp = new Employee();
newEmp.set('EmpNo', $("#txteno").val());
newEmp.set('EmpName', $("#txtename").val());
newEmp.set('DeptName', $("#txtdname").val());
newEmp.set('Designation', $("#txtdesig").val());
newEmp.set('Salary', $("#txtsal").val());
EmpCollection.add(newEmp);
},
//Function to clear all textboxes.
clearInput: function () {
//Clear all Textboxes
$("#tblinput input").val('');
}
});
The above code has some important features:
- The ‘el’ element is defined as ‘body’ to display all elements in it.
- ‘events’ defines ‘click’ event for the button on the Page. These buttons are found using jQuery selector using #‘. Method is assigned to each event i.e. addData and clearInput.
- The ‘render’ function defines the logic for finding the <div> having id as ‘dvContainer’. Once it is found, then the HTML table is generated by iterating through the collection passed to the view. (The code is provided in future steps).
- The ‘addData’ method reads values entered in the Textboxes and using the ‘set’ method of the Backbone model, the value entered in the Textbox is passed to an individual property of the Employee Model object. The model is then added into the EmployeeCollection using ’add()’ method of the Backbone collection.
- The ‘clearInput’ method clears all Textboxes.
Step 6: In the <script>, define the collection object and pass the collection to the View object as shown below:
//The Collection Object
var EmpCollection = new EmployeesCollection();
//The View Object and Pass Collection to it
var EmpsView = new EmployeeRecordsView({
collection:EmpCollection
});
Step 7: Since we need to add data entered in Textboxes to the collection and render the data from collection in a Table, subscribe to the ‘add’ event of the collection and call ‘render’ method of the View in it. So when the collection is changed, a new row will be added in the table.
//Subscribe to the 'add' event of the collection
//When Collection changed
//Render the Updated Table View
EmpCollection.on('add', function () {
EmpsView.render();
});
Step 8: View the page in browser
Enter some data in each Textbox and click on ‘Add’. The data will get added in the Table as shown below:
Click on the ‘Clear’ button to clear all Textboxes. Enter new record values in Textboxes and click on Add button and a new row will be added in the table:
Conclusion: The Backbone library allows you to develop responsive web applications with a clear separation of Model and View. Events associated with Collection helps to notify the UI elements about Updates and accordingly display refreshed data.
Was this article worth reading? Share it with fellow developers too. Thanks!
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @
maheshdotnet