What is Backbone.js attributes View?

In this article, we will learn Backbone.js attributes View,This free Backbone.js tutorial for complete beginners will help you learn Backbone.js from scratch.

Backbone.js attributes View - ❤️Backbone.js Tutorials In 2024

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;"> 
        w3wiki 
    </h1> 
  
    <script type="text/javascript"> 
        var X = Backbone.View.extend({ 
            initialize: function () { 
                document.write(this.tagName); 
            } 
        }); 
          
        var Y = new X({ tagName: "w3wiki!!!" });   
    </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;"> 
        w3wiki 
    </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: "w3wiki!!!",  
                model: "INDIA",  
                className: "NOIDA" 
            }); 
        }   
    </script> 
</body> 
  
</html>

Output:

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