Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If you are not aware of MVC, it is just an architecture paradigm for creating user interfaces. JavaScript functions make it much simpler to design a program's user interface. Models, views, events, routers, and collections are among the building blocks offered by BackboneJS to help developers create client-side web applications.
View el is the central property of a view. All views are required to have one because it essentially refers to a DOM element. There are two ways to link a DOM element to a view: by referencing an existing element on the page, or by creating a new element specifically for the view and adding it to the DOM. The properties tagName, className, and id can all be specified on the view. The tag name variable is used to signify the specific DOM element. If nothing is entered, div will be used as the default tagName.
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>
<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">
Demo = Backbone.View.extend({
initialize: function(){
document.write("Here we are accessing "
+ "the div with the 'content' id "
+ "with the el property.");
}
});
var demo = new Demo({ el: $("content") });
</script>
</body>
</html>
Output:
Example 2: The code below demonstrates the 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>
<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({
// Required property, div by default
tagName: 'span',
// Optional, we can add more than
// one class to the property
className: 'el-element',
id: 'element' // Optional
});
var demo = new Demo();
console.log(demo.el);
</script>
</body>
</html>
Output:
Reference: https://backbonejs.org/#View-el
Similar Reads
Backbone.js $el View 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
2 min read
Backbone.js extend View Backbone.js extend view is a method under the view class that is used to extend the backbone.js view class in order to create a custom view class. For implementation, first of all, we need to create a custom view class and override the render function if required, also we can specify our own declara
2 min read
Backbone.js events View Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If MVC is unfamiliar to you, it is just a technique for designing user interfaces. The creation of a program's user interface is made considerably easier by JavaScript functions. BackboneJ
2 min read
Backbone.js render View Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If MVC isn't familiar to you, it merely denotes a method of user interface design. JavaScript functions make it much simpler to create a program's user interface. Models, views, events, ro
2 min read
Backbone.js remove View Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If MVC is unfamiliar to you, it simply refers to a technique for designing user interfaces. The creation of a program's user interface is made considerably easier by JavaScript functions.
2 min read
Backbone.js delegateEvents View Backbone.js delegateEvents method provides us with a way to bind the elements with the specific HTML DOM. It also provides us with advantages over manually implementing jQuery to bind the events with the child elements during invocation of the render function. Every callback attached to it is bound
2 min read