Use Backbone.js to make a structured web application

Devanand7

Rate me:

0.00/5 (No votes)

15 Apr 2013CPOL2 min read

26.7K

How to use Backbone.js to make a structured web application.

Introduction

Use Backbone.js to make a structured web application.

Background

Major front-end JavaScript frameworks (Backbone.js, Derby.js, Meteor.js, Knockout.js, Ember.js, Angular.js, and Spine.js). Backbone.js is a proven JS framework.

What Is Backbone.js?

Backbone.js is a JavaScript client-side (front-end) framework that helps to organize your code and makes it easier for you to develop single-page web applications. Use Backbone the JavaScript in a more organized, structured manner, where the logic (the data—model—and the presentation) are sufficiently decoupled.

Why We Need Backbone.js?

You will build JS applications considerably faster than you ever have.
IT supports MVC design.
Major front-end JavaScript frameworks (Backbone.js, Derby.js, Meteor.js, Knockout.js, Ember.js, Angular.js, and Spine.js). Backbone.js is a proven JS framework.

Code Sample to Work on BackBone.JS

I have created a sample to clear the basic concept of Backbone.Js. To access the Backbone libraries, I have used online http://cdnjs.cloudflare.com for AJAX libraries.

For this we only need to create two files sampleTask.js and sampleTask.html.

The sampleTask.html would look like this:

XML

<!DOCTYPE html >
<html>
<head>
    <title>Backbone.js Sample by Dev</title>
    <script type="text/javascript" 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" 
      src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
    <script type="text/javascript" 
      src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
    <script type="text/javascript" 
      src="sampleTask.js"></script>
</head>
<body>
    <input type="text" placeholder="Add The Tasks" id="input" />
    <button id="add-input">Add Task</button>
    <ul id="task-list"></ul>
</body>
</html>

Another sampleTask.js file needs to have the following set of code.

Add the code and execute the Html file. The HTML file already has the reference of the below created JS file "sampleTask.js".

JavaScript

$(function() {

    TaskList = Backbone.Collection.extend({
        initialize: function() {
        }
    });

    TaskView = Backbone.View.extend({

        tagName: 'li',
        events: {
            'click #add-input': 'getTask'
        },

        initialize: function() {
            var thisView = this;
            this.tasklist = new TaskList;
            _.bindAll(this, 'render');
            this.tasklist.bind("add", function(model) {
                thisView.render(model);
            })
        },

        getTask: function() {
            var task_name = $('#input').val();
            this.tasklist.add({ name: task_name });
        },

        render: function(model) {
            $("#task-list").append("<li>" + 
               model.get("name") + "</li>");
            console.log('rendered')
        }

    });

    var view = new TaskView({ el: 'body' });
});

Code Explanation

In the above JS code, initially I have created a TaskList collection to add the items.

In the initialize method, the view registers itself for two built in model collection events: add and remove. I have added the add event to rendered the view corresponding to the added TaskList model.

The getTask method is used to get the value from any input type and add that in the above declared TaskList collection.

The last “render” method would get called to display the List (Added items as model) in the HTML element “task-list”.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Devanand7

United States

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.