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

Backbone.js remove View

priyanshuchatterjee01

Improve

Article Tags :

Backbone.js setElement View

Similar Reads

Thank You!

What kind of Experience do you want to share?