Backbone.js API Integration

Last Updated : 06 Apr, 2023

Backbone.js is a lightweight library for structuring JavaScript code. It is also regarded as the MVC/MV* kind of framework. If you are not familiar with MVC, it is basically an architecture pattern for implementing user interfaces. Backbone.js also provides the concept called a router. It is used for developing single-page applications. A single-page application is a kind of web application that fits on a single web page. Aiming to provide a rich user experience similar to desktop applications.

Backbone is already set up to communicate with a RESTful API. We can use the API as the link for the resource of data in our Backbone. Simply create a new collection with the URL of your resource endpoint:

Syntax:

var collection = Backbone.Collection.extend( { URL: ‘https://gfg.com’} );

Properties:

URL: Here URL is the link where there are resources reside.

The Collection and model components together form a direct mapping REST resource using the following method.

fetch(): Function gets the data from the URL.
create(): Function to post the data.
destroy(): To delete the data.

Now let’s see when we fetch data from the resource and how the Collection and Model format the data from the resource.

Example 1: This example will illustrate the API Integration with Collection:

HTML

<!DOCTYPE html>
<html>
 
<head>
 
    <title>Hello Geeks using Backbone.js</title>
    <!-- Libraries -->
    <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.3.3/underscore-min.js"
        type="text/javascript"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"
        type="text/javascript"></script>
</head>
 
<body>
    <!-- OUr HTML -->
    <div id="element">Hello Geeks for Geeks</div>
 
    <!-- Javascript code -->
    <script type="text/javascript">
 
        var car = Backbone.Model.extend();
 
        var collection = Backbone.Collection.extend({
            model: car,
            url: "/users"
        });
 
        var Coll_car = new collection();
        Coll_car.fetch();
        console.log(Coll_car);
    </script>
 
</body>
 
</html>

Output: Here Coll_car.fetch() function is equivalence to Get request. The output below shows that Collection populates it by the model in the format of Array.

COLLECTION WITH API.

Example 1: This example will illustrate the API Integration with Model

When we fetch raw JSON data from an API, a Model will automatically populate itself with data formatted as an object. Below code will illustrate how to use API links as a source for data.

HTML

<!DOCTYPE html>
<html>
 
<head>
 
    <title>Hello Geeks using Backbone.js</title>
    <!-- Libraries -->
    <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.3.3/underscore-min.js"
        type="text/javascript"></script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"
        type="text/javascript"></script>
</head>
 
<body>
    <!-- OUr HTML -->
    <div id="element">Hello Geeks for Geeks</div>
 
    <!-- Javascript code -->
    <script type="text/javascript">
 
        var Model = Backbone.Model.extend({
            url: "/users"
        });
 
        var N_model = new Model();
        N_model.fetch();
        console.log(N_model);
    </script>
 
</body>
 
</html>