Introduction
In this article we will create a simple list using a prompt box. When we click on the "Add" button then it displays a prompt box, thenwe type the name and click on "Ok", then the name will be added to the list.
Backbone.js is a JavaScript library for client-side applications. It helps for managing the code for the developers that use this code to cerate a single page application. Backbone.js has four classes that are Models, Views, Controllers and collections. The Models and collections work together when combined, those two classes make up the Model of MVC.
Use the following procedure to the application:
- First create a Web application:
- Start Visual Studio 2013.
- From the Start window select "New Project".
- Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "Empty web Application".
![Web application]()
- Click on the "OK" button.
- Now add the HTML Page to the project:
- In the Solution Explorer.
- Right-click on the project and select "Add" -> "HTML Page".
![Add HTML Page]()
![Change Name of this Page]()
- Then click on the "OK" button.
First in this HTML page include the backbone and underscore.js in this page; underscore.js is a dependent of backbone.js.
<!DOCTYPE html>
<html>
<head>
<title>I have a back bone</title>
</head>
<body>
<button id="add-frndname">Add Friend</button>
<ul id="friends-list"></ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
</body>
</html
Now we set the main View.
Here we wrap the backbone code with the jQuery, this only is to ensure that the page is loaded correctly. Now we add the main application View that is the extent from the backbone and pass the JSON object with options.
The code looks like this:
(function ($) {
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.friends = new Friends(null, { view: this });
},
events: {
"click #add-frndname": "showPrompt",
},
showPrompt: function () {
var Frnd_Name = prompt("Type your friend name");
}
});
var appview = new AppView;
})(jQuery);
Collecting the Models
Now we will add the code to our example that adds the new friend model in the friend collection. We will then bind the listeners to create a new list element when the data has changed.
The code is as follows:
(function ($) {
Friend = Backbone.Model.extend({
//Create a model to hold friend atribute
name: null
});
Friends = Backbone.Collection.extend({
//Create a collection for holding friend model
initialize: function (models, options) {
this.bind("add", options.view.addFriendList);
//Listen for new additions to the collection and call a view function if so
}
});
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.friends = new Friends(null, { view: this });
},
events: {
"click #add-frndname": "showPrompt",
},
showPrompt: function () {
var Frnd_Name = prompt("Type your friend name");
var Frnd_Model = new Friend({ name: Frnd_Name });
//Add friend model to the frient collection
this.friends.add(Frnd_Model);
},
addFriendList: function (model) {
//The parameter passed is a reference to the model that was added
$("#friends-list").append("<li>" + model.get('name') + "</li>");
//Use .get to receive attributes of the model
}
});
var appview = new AppView;
})(jQuery);
Now the entire code of the HTML page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>BAckbone List Example</title>
</head>
<body>
<button id="add-frndname">Add Friend</button>
<ul id="friends-list"></ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
Friend = Backbone.Model.extend({
//Create a model to hold friend atribute
name: null
});
Friends = Backbone.Collection.extend({
//Create a collection for holding friend model
initialize: function (models, options) {
this.bind("add", options.view.addFriendList);
//Listen for new additions to the collection and call a view function if so
}
});
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.friends = new Friends(null, { view: this });
},
events: {
"click #add-frndname": "showPrompt",
},
showPrompt: function () {
var Frnd_Name = prompt("Type your friend name");
var Frnd_Model = new Friend({ name: Frnd_Name });
//Add friend model to the frient collection
this.friends.add(Frnd_Model);
},
addFriendList: function (model) {
//The parameter passed is a reference to the model that was added
$("#friends-list").append("<li>" + model.get('name') + "</li>");
//Use .get to receive attributes of the model
}
});
var appview = new AppView;
})(jQuery);
</script>
</body>
</html>
Now execute the application.
I display a button when we click on the button then it display the Promptbox.
![Display prompt box]()
Type the name in this prompt box and click on the OK button, then the names are added to the list.
![Display name list]()
And when we click on the cancel button then it adds the "null" as a value in the list.
![display null values]()