Add Items To A List Using Textbox in Backbone.JS

Introduction

This article explains how to add various items in a list in backbone.js. Here we have a TextBox in which we enter the desired items and click on the button then it wll add the item 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 create a Single Page Application.

Now see the example:

First create an 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".

Create Web Application

Click on the "OK" button.

Now Add an HTML Page.

In the Solution Explorer.
Right-click on the project and select "Add" -> "HTML Page".

Add HTML Page

Change the name of the page.

change Name

Click on the "Add" button.

Add the following code:

<!DOCTYPE HTML>

<html>

<head>

<title>Backbone js example</title>

src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>

src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

src="scripts/Hello.js"></script>

</head>

<body>

</body>

</html>

Now add the Scripting file to the Project:

In the Solution Explorer.
Right-click on the project then select "Add" -> "New Item" -> "JavaScript".

Add javascript file

Click on the "Add" button.

Add the following code:

$(function () {

ItemList = Backbone.Collection.extend({

initialize: function () {

}

});

ItemView = Backbone.View.extend({

tagName: 'li',

events: {

'click #add-input': 'getItem'

initialize: function () {

var thisView = this;

this.itemlist = new ItemList;

_.bindAll(this, 'render');

this.itemlist.bind("add", function (model) {

thisView.render(model);

})

getItem: function () {

var item_Name = $('#input').val();

this.itemlist.add({ name: item_Name });

render: function (model) {

$("#item-list").append("<li>" +

model.get("name") + "</li>");

console.log('rendered')

}

});

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

});

In the code above we have created an "ItemList" for adding the items.

The "getItem" method takes the input and adds the items into the ItemLIst.

The initialize method is defined since the View model registered itself to the model collection event.

The render method is used for displaying the list.

Now the HTML page is executed first by setting the property using "Start as startup project".

Right-click on the "AddListItem.html".
Then select "Set as Start Page".

Set Html as start first

Now execute the application:

Display Textbox

Enter the value in the text box and click on the button..

Add new items