Open In App

Backbone.js Events Catalog of Built-in Event

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’s just a method for creating user interfaces. 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 Backbone.js to help developers create client-side web applications.

Events allow us to directly connect event listeners to el if no selector is specified, as well as to custom selectors, and related selectors. The representation of an event is a key-value pair.

"<eventName> <selector>" : "<callbackFunction>"

A number of DOM event types are supported, including click, submit, mouseover, dblclick, etc.

Syntax:

var demoView = Backbone.View.extend({
    events: {
        'click button: 'function1',
        'keypress label': 'function2',
    },
    ...
})

The list of built-in events which are supported in the backbone is given below.

  • “reset” (collection, options): When the collection’s content has been wiped clean.
  • “sort” (collection, options): When the collection has undergone a new sort.
  • “change” (model, options): When the properties of a model have changed.
  • “changeId” (model, previousId, options): After an update to the model’s id.
  • “change:[attribute]” (model, value, options): Whenever a particular attribute has been modified.
  • “destroy” (model, collection, options): A model’s destruction.
  • “request” (model_or_collection, xhr, options): When a service request has been made by a model or collection.
  • “sync” (model_or_collection, response, options): When a model or collection has synchronized with the server successfully.
  • “error” (model_or_collection, xhr, options): When an attempt to contact the server by a model or collection has failed.
  • “invalid” (model, error, options): When a model’s client-side validation fails.
  • “route:[name]” (params): Triggered by the router whenever a particular route matches.
  • “route” (route, params): When any route has been matched, the router fires.
  • “route” (router, route, params): When any path has been matched, history fires.
  • “all”: With the event name as the first parameter and any trigger arguments following, this special event fires for any triggered event.

Example 1: The code below demonstrates how we can implement the change, changeId events in a view.

HTML




<!DOCTYPE html>
<html>
  
<head>
        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 Events Catalog of Built-in Event</h3>
    <div id="div-1">
        Enter some text.<input type="text"></input>
    </div>
    <div id="div-2">
        Enter some text.<input type="text" id="hel"></input>
    </div>
  
    <script type="text/javascript">  
        var ViewDemo1 = Backbone.View.extend({  
            events: {
                'change input': 'Func1',  
            },  
            Func1: function () {  
                document.write("Function 1.") 
            },  
        });  
        var ViewDemo2 = Backbone.View.extend({  
            events: {  
                'change #hel': 'Func2'  
            },  
            Func2: function () {  
                document.write("Function 2.") 
            },  
        });  
        var myView1 = new ViewDemo1({el: '#div-1'});  
        var myView2 = new ViewDemo2({el: '#div-2'});  
    </script>  
</body>
  
</html>


Output:

 

Example 2: The code below demonstrates how we can implement the routes event and how we can define it inside a router

HTML




<!DOCTYPE html>
<html>
  
<head>
        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 Events Catalog of Built-in Event</h3>
    <div id = "content">
        <button><a href = "#/first_link">
              Go to first Route
        </a></button>
        <button><a href = "#/second_link">
              Go to second Route
        </a></button>
    </div>
  
    <script type="text/javascript">
  
        var Router = Backbone.Router.extend({
            routes: {
                'first_link': 'first_route',
                'second_link': 'second_route'
            },
            first_route: function () {
                document.write("Calling the First Route.");
            },
  
            second_route: function () {
                document.write("Calling the Second Route.");
            },
        });
        var router = new Router({
            el: '#content'
        });
  
        Backbone.history.start();
    </script>
</body>
  
</html>


Output:

 

Reference: https://backbonejs.org/#Events-catalog 



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