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