Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If you are unfamiliar with MVC, it is just a design paradigm for user interfaces. The creation of a program’s user interface is made considerably easier by JavaScript functions. BackboneJS provides a variety of building elements to aid developers in creating client-side web applications, including models, views, events, routers, and collections.
View $el is also the representation of the view’s element but it is a cached jQuery object. This also contains the element but with jQuery functions enabled. Because this $el maintains a reference to your element, you won’t have to search across the DOM each time you use it. With the advantages to the performance that this suggests.
Syntax:
view.$el
Example 1: The code below shows how we can manipulate HTML content using the $el property.
HTML
<!DOCTYPE html> <html> <head> <title>Backbone.js $el View</title> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <h3>Backbone.js $el View</h3> <div id="content"></div> <script type="text/javascript"> var Demo = Backbone.View.extend({ el: '#content', initialize: function () { this.render(); }, render: function () { this.$el.html("Hello Geek!! Welcome " + "to neveropen. This is a " + "demo of the $el in view."); } }); var myview = new Demo(); </script> </body> </html> |
Output:
Example 2: The code below demonstrates the non-usage and usage of the properties tagName, className, and id as span, el-element, and element.
HTML
<!DOCTYPE html> <html> <head> <title>Backbone.js $el View</title> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <h3>Backbone.js $el View</h3> <script type="text/javascript"> var Demo_1 = Backbone.View.extend({ initialize:function(){ this.render(); }, render:function(){ console.log(this.$el) }, }); var Demo_2 = Backbone.View.extend({ tagName: 'span', className: 'el-element', id: 'element', initialize:function(){ this.render(); }, render:function(){ console.log(this.$el) }, }); var myview_1 = new Demo_1(); var myview_2 = new Demo_2(); </script> </body> </html> |
Output:
Reference: https://backbonejs.org/#View-$el
