Backbone.js setElement View
Last Updated :
02 Aug, 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 familiar with MVC, it is only a user interface design paradigm. JavaScript functions make it much simpler to create 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's setElement method can be used to apply an existing Backbone view to a different DOM element.
Syntax:
view.setElement(element)
Used Parameter:
- element: This parameter specifies the element which is changed from the existing element to a new element.
Example 1: The code below defines how to use the setElement method in the view.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js setElement 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 setElement View</h3>
<div id="myview">
Enter any text: <input type="text" />
</div>
<script type="text/javascript">
// 'Demo' is a name of the new view class
var Demo = Backbone.View.extend({
// Event triggers 'sayHi' function when
// you enter the text in input tag
events: {
'change input': 'Hello'
},
// This function is called when the
// view is instantiated
initialize: function () {
// 'setElement' changes the element
// associated with the view
this.setElement($('#myview'));
},
// After entering the text, it displays the
// below line on the body below the h3
Hello: function () {
this.$el.html('Welcome to Gfg!! This '
+ 'is a demo of the setElement '
+ 'method of View');
}
});
// 'demo' is a instance of the 'Demo' class
var demo = new Demo;
</script>
</body>
</html>
Output:
Example 2: The code below demonstrates how to trigger a template from a button using the setElement method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js setElement 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 setElement View</h3>
<div id="myButton">
Example Button: <input type="button" id="hi"
value="Click me to trigger the Template" />
</div>
<script type="text/javascript">
// 'Demo' is a name of the new view class
var Demo = Backbone.View.extend({
template: _.template('This is the Example template'),
events: {
'click input': 'trigger'
},
// This function is called when the
// view is instantiated
initialize: function () {
this.setElement($('#myButton'));
// 'setElement' changes the element
// associated with the view
},
// After clicking on the button, it
// displays the template
trigger: function () {
this.$el.html(this.template);
}
});
// 'demo' is a instance of the 'Demo' class
var demo = new Demo;
</script>
</body>
</html>
Output:
Reference: https://backbonejs.org/#View-setElement