Click here to Skip to main content
Click here to Skip to main content

Use Backbone.js to make a structured web application

, 15 Apr 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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?

  1. You will build JS applications considerably faster than you ever have.
  2. IT supports MVC design. 
  3. 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:

<!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". 

$(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)

Share

About the Author

Devanand7

United States United States
No Biography provided

Comments and Discussions

 
QuestionWhy do you have 0.3.3 version of backbone.js? Pinmemberalvas15-Apr-13 3:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150129.1 | Last Updated 15 Apr 2013
Article Copyright 2013 by Devanand7
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid