Backbone.js attributes View

0 0 1 minute read

Backbone.js attributes view are nothing but a hash of attributes which are set as HTML DOM element attributes on the view’s el. For example, (id, class, data-properties, etc.), or in other cases, a function that returns a hash.

Syntax:

view.attributes

Parameters:

View: It is a class under Backbone which is implemented as Backbone.View.extend( { } );
Attributes: It is a method that is used as a DOM element attribute on the view class.

Example 1: The following codes demonstrate the view and attributes of Backbone.js.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
  
    <script type="text/javascript"> 
        var X = Backbone.View.extend({ 
            initialize: function () { 
                document.write(this.tagName); 
            } 
        }); 
          
        var Y = new X({ tagName: "zambiatek!!!" });   
    </script> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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> 
      
    <button onclick="invoke()">Click me</button> 
      
    <script type="text/javascript"> 
        var X = Backbone.View.extend({ 
            initialize: function () { 
                var country; 
                document.write(this.tagName, "<br>"); 
                document.write("Country Name= " +  
                    this.model + "<br>City Name= " +  
                    this.className); 
            } 
        }); 
  
        function invoke() { 
            var Y = new X({ 
                tagName: "zambiatek!!!",  
                model: "INDIA",  
                className: "NOIDA" 
            }); 
        }   
    </script> 
</body> 
  
</html>

Output:

Reference: https://backbonejs.org/#View-attributes

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!