About the Author:

How to Get Started With Backbone.js

July 22nd, 2015

Backbone.js is a very powerful Javascript library for front end development. Notice that it’s not a framework. The advantage of using a library is that it will give you a lot of flexibility, while the framework has opinionated ways of doing things.

Basics of Getting Started with Backbone.js

Backbone.js has following components:

  • Views
  • Events
  • Models
  • Collections
  • Routers

In this article, we’ll focus on Views and Events. Backbone.js has soft dependency on jQuery and hard dependency on UnderscoreJS. So we will focus on including those libraries while linking Backbone.js in your HTML page. We are going to include following libraries within our code:

Views are components which belongs to single HTML element. So, we make a simple div and we will link it with Backbone.js View. The following code showing `#container` div with the input text box with id `#name-text-box` and simple span which shows greeting message with id `#greeting-text`.


Hello !

Below is main Javascript code for define view:


Each of the above statements performs unique task:

  • el => A DOM element in HTML that will be rendered.
  • events => Bind event on particular DOM element present within `el`.
  • initialize => A first method called when view in instantiated.
  • changeName => Executed each time `keyup` called on `#name-text-box`.

Now, to display the view we need to create and initialize it by below line:

  // Initializing Backbone View to show on screen
    var simpleView = new SimpleView();

To render the view in the browser we need to create and initialize it as we see below. It is greeting you with the name which you enter within text box. Enjoy! Looking to learn more about Backbone.js for your team? Check out our custom group training options today.

About the Author:

Binding of DOM Events to View Methods with Backbone.js

March 28th, 2015

Before we dive into this topic, lets discuss Backbone.js and why it was created for web developers.

Backbone.js deserves a lot of credit for bringing MVC to mainstream client-side Javascript development world. That said, many beginners ask what the correct way of doing something with Backbone.js is. The bad news is that isn’t necessarily a correct way. In the end, it all depends on the problem you are trying to solve.

The good news is that there are definitely some wrong ways that you should avoid on your way to finding the right solution for your particular problem.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a “change” event; all the Views that display the model’s state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don’t have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually ó when the model changes, the views simply update themselves.

Basic Requirement of start backbone coding require Underscore.js,jQuery.js and Backbone.js.

Now, let’s try to create a simple example of event binding using BackboneJS.

Here is the code snippet of above example.

initialize(): Method which will call when the View object is created.
events: Where DOM events are bound to View methods. Backbone doesn't have a separate controller to handle such bindings; it all happens in a View.
render(): Introduces a button to add a new list item.
addItem(): Custom function called via click event defined in events section.

Here in the initialize method there is _.bindAll method which binds all the defined function to the current view.

Click the event of button is define in the events section which will fire addItem function when click event triggers. So, AddItem function will add item to the list. So that’s how dom event binding to the view methods works in Backbone.js.

Looking to learn more about Backbone.js for your team? Check out our custom group training options today.