Backbone.js $el View

0 0 2 minutes read

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> 
    <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;"> 
        zambiatek 
    </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 zambiatek. 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> 
    <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;"> 
        zambiatek 
    </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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!