How to Get Started With Backbone.js

Follow us on LinkedIn for our latest data and tips!


How to Get Started With Backbone.js

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.