Post
Ask Question

Swap and Remove a List Items using Backbone.js

Introduction

This article explains two model actions, swap and remove, using Backbone.js. It explains how to handle these two actions in the view of the model. Here we will create an application in which we product in the list. These products are swapped with each other and we can delete them. We define two actions, swap and remove, and when we click on these two actions then the operation is performed, the products are swap with each other and removed from the list.

 Now we will create the application:

  1. First we will create an application for this action:
  • Start Visual Studio 2013.
  • From the Start window select "New Project".
  • Select "Installed" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET Empty Web Application".

Create Web Application

  • Click on the "OK" button.
  1. Now Add an HTML page in the project:
  • In the Solution Explorer.
  • Right-click on the project select "add" -> "HTML Page".

Add HTML page

  • Change the Name of the Page.

Change Name

  • Click on the "OK" button.

Add the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add List Item</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="AddList.js" type="text/javascript"></script>
</body>
</html>

  1. Now add the scripting file to the project:
  • In the Solution Explorer.
  • Right-click on the project an select "Add" -> "New Item" -> "JavaScript".

Add javascript file

  • Click on the "Add" button.

Add the following code:

(function($){
Backbone.sync = function(method, model, success, error){
success();
}
var Product = Backbone.Model.extend({
defaults: {
First: 'Keyboard',
Second: 'Mouse'
}
})
;var List = Backbone.Collection.extend({
model: Product
});
var ProductView = Backbone.View.extend({
tagName: 'li',
events: {
'click span.swap': 'swap',
'click span.remove': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove');
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).html('<span style="color:Red;">'+this.model.get('First')+' '+this.model.get('Second')+'</span> <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="remove" style="cursor:pointer; color:Green; font-family:sans-serif;">[remove]</span>');
return this; },
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
First: this.model.get('Second'),
Second: this.model.get('First')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
}
});
var ListView = Backbone.View.extend({
el: $('body'), events: {
'click button#add': 'addProduct'
},
initialize: function(){
_.bindAll(this, 'render', 'addProduct', 'appendProduct');
this.collection = new List();
this.collection.bind('add', this.appendProduct); /
this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add List Product</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(product){
self.appendProduct(product);
}, this);
}
,addProduct: function(){
this.counter++;
var product = new Product();
product.set({
Second: product.get('Second') + this.counter });
this.collection.add(product);
},
appendProduct: function(product){
var productView = new ProductView({
model: product
});
$('ul', this.el).append(productView.render().el);
}
})
var listView = new ListView();
})(jQuery);

In the code above there is a functions used as in the following.

Backbone.async: It overrides the endurance storage with the duplicate function.

The ProductView is the response when the click events are performed on both of the actions.

The Initialize() function binds swap and remove to the corresponding handlers.

render() includes the span with the corresponding function swap and delete.

swap(): It exchanges the attributes of the products. The event change will be triggered when we invoke the .set().

remove(): Here we use the destroy() for deleting the Item from the list. This deletes the record from the endurance storage.

  1. Now set the HTML Page to execute first by setting the property "Set as start Page".
  • Right-click on the "AddLIst.Html"
  • Then select the "Set as Start page".

Set start up page

  1. Execute the application:

Display Add List Button

  1. When we click on the ADD Iist prooduct button it adds the items into the list with the swap and delete action.

Add List of Product

  1.  Now click on the swap; it then swaps the attributes:

Swap the Items

  1. Now click on the remove event; this removes the product from the list.

Delete Items


Similar Articles