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.
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js $el View</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>
<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.
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js $el View</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>
<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>
