Backbone.js el View

Last Updated : 26 Jul, 2022

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>