Open In App

Backbone.js setElement View

Improve
Improve
Like Article
Like
Save
Share
Report

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>
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        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>
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        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



Last Updated : 02 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads