- BackboneJS Tutorial
- BackboneJS - Home
- BackboneJS - Overview
- BackboneJS - Environment Setup
- BackboneJS - Applications
- BackboneJS - Events
- BackboneJS - Model
- BackboneJS - Collection
- BackboneJS - Router
- BackboneJS - History
- BackboneJS - Sync
- BackboneJS - View
- BackboneJS - Utility
- BackboneJS Useful Resources
- BackboneJS - Quick Guide
- BackboneJS - Resources
- BackboneJS - Discussion
BackboneJS - View delegateEvents
Description
Binds elements to the specified DOM elements with callback methods to handle events. If events are removed from the view, this method can be used to attach the events to the view.
Syntax
delegateEvents(events)
Parameters
events − It provides events that are needed for reattaching to the view.
Example
<!DOCTYPE html> <html> <head> <title>View Example</title> <script src = "https://code.jquery.com/jquery-2.1.3.min.js" type = "text/javascript"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type = "text/javascript"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type = "text/javascript"></script> </head> <body> <div id = "mydiv"></div> <script type = "text/javascript"> //'ViewDemo' is a name of the view class var ViewDemo = Backbone.View.extend ({ //When click event occurs it activates the defined function 'delegateFunc' events: { 'click button': 'delegateFunc' }, delegateFunc: function () { this.remove(); //The 'remove()' method removes the view from the DOM document.write("Welcome to Tutorialspoint..."); }, //'render' provides the logic required to construct the view render: function () { //'$el' is cached object that push the content defined within it and //display the value when user clicks the button this.$el.html('<button>Click to delegate events</button>'); }, //This function is called when the view is instantiated initialize:function() { this.render(); } }); //'myview' is an instance of the 'ViewDemo' class var myview = new ViewDemo({el: '#mydiv'}); //'el' defines which element to be used as the view reference //Here defining the events which are reattaching to the view //using 'delegateEvents()' method myview.delegateEvents(); </script> </body> </html>
Output
Let us carry out the following steps to see how the above code works −
Save the above code in the delegateevents.htm file.
Open this HTML file in a browser.
backbonejs_view.htm
Advertisements