Backbone.js $el View
Last Updated :
26 Jul, 2022
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;" >
GeeksforGeeks
</ 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 GeeksforGeeks. 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;" >
GeeksforGeeks
</ 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
Share your thoughts in the comments
Please Login to comment...