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:
- 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".
- Click on the "OK" button.
- Now Add an HTML page in the project:
- In the Solution Explorer.
- Right-click on the project select "add" -> "HTML Page".
- Change the Name of the Page.
- 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>
- Now add the scripting file to the project:
- In the Solution Explorer.
- Right-click on the project an select "Add" -> "New Item" -> "JavaScript".
- 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.
- 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".
- Execute the application:
- When we click on the ADD Iist prooduct button it adds the items into the list with the swap and delete action.
- Now click on the swap; it then swaps the attributes:
- Now click on the remove event; this removes the product from the list.
Mahesh ChandPosted Dec 24, 2013, 11:03 PM
Great Mudita. I would like to see moving a List items using drag drop. Select an item, drag it to a different position and drop it will move the dropped item to a new position. That will be cool. Cheers!