Introduction to Backbone.js

In this article, I’m explaining about Backbone.js.

in my previous post i'll discuss about Hashtable and dicitionary if you want to learn about hashtable read my previous post Hashtable And Dictionary in C#

A Single-Page Application (SPA), also known as Single-Page Interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience similar to a desktop application.

Backbone.js is a lightweight JavaScript library that adds structure to your client-side code. Developers commonly use libraries like Backbone.js to create single-page applications (SPAs). SPAs are web applications that load into the browser and then react to data changes on the client side without requiring complete page refreshes from the server.

Model:

A Model in backbone consists of the connected data for the web application. It also contains the connection among the data. It contains the interactive data.

View:

The view is the user interface but in backbone it is not only the view but also a controller for connecting the model to the data interaction.

Collection:

Collections are the set of models, we create the collection by extending the Backbone.Collection. While creating the collection we want to pass the property that specifies the specific model that the collection will hold.

Step 1:

Open visual Studio >> File >> New >> Website >> Select Asp.NET Empty Website >> Give the project Name >> Click “OK”

Step 2:

Now add html page

Step 3:

Now Download these three files and add these files in your html page

<scriptsrc="script/jquery-2.1.0.min.js"></script>

<scriptsrc="script/underscore-min.js"></script>

<scriptsrc="script/backbone-min.js"></script>

Step 4:

Now add this code in your html file

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <scriptsrc="script/jquery-2.1.0.min.js"></script>
    <scriptsrc="script/underscore-min.js"></script>
    <scriptsrc="script/backbone-min.js"></script>
</head>
<body>
<divid="divClient">
        EmailID: <inputtype="text"id="txtIdClient"placeholder="Username"/><br/><br/>
          Password: <inputtype="password"id="txtNomClient"placeholder="Paasword"/><br/><br/>
          <buttonid="cmdAddClient">SignUp</button>
          <buttonid="login">Login</button>
        <br>
        <ulid="listeClient"></ul>
    </div>
</body>
<script>
    var emailid, pass;
    var Client = Backbone.Model.extend({
        defaults: {
            name: null,
            pwd: null
        },
        initialize: function () {
            console.log("initialize client");
        }
    });
    var ClientsCollection = Backbone.Collection.extend({
        model: Client,
        initialize: function () {
            console.log("initialize clients collection");
            this.bind("add", function (model) { console.log("Add", model.get('id'), model); });
            this.bind("remove", function (el) { console.log("Remove", el.get('id'), el); });
        }
    });
    var ClientView = Backbone.View.extend({
        el: $("#divClient"),
        initialize: function () {
            var that = this;
            this.listeClients = new ClientsCollection();
            this.listClients = new ClientsCollection();
            this.listeClients.bind("add", function (model) {
                that.addClientToList(model);
            });
            this.listClients.bind("add", function (model) {
                that.addLoginToList(model);
            });
        },
        events: {
            'click #cmdAddClient': 'cmdAddClient_Click',
            'click #login': 'login'
        },
        cmdAddClient_Click: function () {
            var tmpClient = new Client({
                name: $("#txtIdClient").val(),
                pwd: $("#txtNomClient").val(),
            });
            this.listeClients.add(tmpClient);
        },
        login: function () {
            var tmplogin = new Client({
                name: $("#txtIdClient").val(),
                pwd: $("#txtNomClient").val(),
            });
            this.listClients.add(tmplogin);
        },
        addClientToList: function (model) {
            emailid = model.get('name');
            pass = model.get('pwd');
            $("#listeClient").html("<font color=#00ff00>You are Successfully Registered, Now you can Login</font>");
        },
        addLoginToList: function (model) {;
            if (model.get('name') == emailid && model.get('pwd') == pass) {
                $("#divClient").html("<font color=blue>Login sucessfull</font>");
            }
            else {
                $("#listeClient").html("<font color=#ff0000>Failed Logged in, Retry</font>");
            }
        }
    });
    var clientView = new ClientView();
    Backbone.history.start();
</script>
</html>

Now execute the your html file it display the like this

Now enter emailid and password and click login before signup then will through the error message like this

Now enter emailid and password and click Signup then it display message like this

Now we can login.

in my next post i'll introduced about SignalR

articles

Introduction to Backbone.js

Anonymous User

Leave Comment

Comments

Liked By