Backbone.js Handling DOM events and working with Collections

Tweet

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

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.

Backbone.js Basics and Rendering Collection using View

Tweet

In the current era of web application development, Single Page Applications (SPAs) are often demanded by customers. Currently there are lots of different frameworks available for developing web application, most of these are server side frameworks e.g. ASP.NET MVC. But one of the important aspects for Web development is to provide Rich user interface with UX (user experience). Thankfully there are several JavaScript client side frameworks available to get this thing done e.g. jQuery, Knockout, Backbone etc. Using these frameworks, a developer can develop Rich and better UX applications.

Backbone Basics

Backbone.js is a lightweight library for structuring client side code. This easily helps to decouple concerns in the application. Typically, this library is used to build SPA’s. The advantage of using backbone is that it provides lightweight data structuring mechanism using model and collection and helps to use these in generated Views. This is very important for designing dynamic applications using JavaScript. You can get detailed information from http://backbonejs.org/.

There are some important features provided by Backbone as discussed below: