Open In App

Backbone.js template View

Improve
Improve
Like Article
Like
Save
Share
Report

Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If MVC is unfamiliar to you, it only refers to a user interface design paradigm. The creation of a program’s user interface is made considerably easier by JavaScript functions. BackboneJS provides a variety of building elements to aid developers in creating client-side web applications, including models, views, events, routers, and collections.

Using the Backbone.js template function access to instance data is made available and reusable copies of markup are produced. Setting up a template function for your views is a nice convention.

Syntax:

view.template(data)  

Parameters:

  • data: It is used to define the data which will be used while executing the view.

Example 1: The code below demonstrates how to implement a template inside a view.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Backbone.js template 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 template 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: 'We provide a variety of services '
                        + 'for you to learn, thrive and also'
                        + ' have fun!' }));
            }
        });
  
        var myDemo = new Demo();  
    </script>
</body>
  
</html>


Output:

 

Example 2: The code below demonstrates how we can make routes and integrate different templates into them.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Backbone.js template 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 template View</h3>
  
    <div id="content"></div>
  
    <script type="text/javascript">
        var Route1 = Backbone.View.extend({
            template: _.template("GeeksforGeeks: <%= tagline %>"),
            initialize: function () {
                this.execute();
            },
            execute: function () {
                this.$el.html(this.template({ 
                    tagline: 'A Computer Science Portal for Geeks' }));
            }
        });
        var Route2 = Backbone.View.extend({
            template: _.template("GeeksforGeeks: <%= tagline %>"),
            initialize: function () {
                this.execute();
            },
            execute: function () {
                this.$el.html(this.template({ 
                    tagline: 'A portal for high quslity '
                        + 'articles on technology.' }));
            }
        });
  
        var AppRouter = Backbone.Router.extend({
            routes: {
                '': 'default',
                'route/1': 'homeRoute',
                'route/2': 'aboutRoute',
            },
  
            default: function () {
                $("#content").html("We haven't triggered any template.");
            },
  
            homeRoute: function () {
                var route1 = new Route1();
                $("#content").html(route1.el);
            },
  
            aboutRoute: function () {
                var route2 = new Route2();
                $("#content").html(route2.el);
            }
        });
        var appRouter = new AppRouter();
  
        Backbone.history.start();     
    </script>
</body>
  
</html>


Output:

 

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



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