Backbone.js render 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 MVC isn't familiar to you, it merely denotes a method of user interface design. 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 Render function is primarily used to create the basic framework for a view and how it will be shown. This function is used to execute some logic that is used to render the template which will construct the view.

Syntax:

view.render()

Example 1: The code below demonstrates how

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Backbone.js template 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 render View</h3>
    <div id="content"></div>

    <script type="text/javascript">
        var Demo = Backbone.View.extend({
            el: $('#content'),
            initialize: function () {
                this.render()
            },
            render: function () {
                console.log(this.el),
                    this.$el.html(
                        "The $el variable here is: " 
                        + this.el);
            },
        });

        var myDemo = new Demo();  
    </script>
</body>

</html>

Output:

Example 2: The code below demonstrates how to process markup from a template in a view using the Render function.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Backbone.js template 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 render View</h3>
    <div id="content"></div>

    <script type="text/javascript">
        var Demo = Backbone.View.extend({
            el: $('#content'),
            template: _.template("GeeksforGeeks: <%= line %>"),
            initialize: function () {
                this.render();
            },

            render: function () {
                this.$el.html(this.template({ line: 
                    'A Computer Science portal for Geeks!!' }));
            }
        });

        var myDemo = new Demo();  
    </script>
</body>

</html>

Output:

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

Backbone.js preinitialize View

triashabiswas

Improve

Article Tags :

Backbone.js render View

Similar Reads

Thank You!

What kind of Experience do you want to share?