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 >
type = "text/javascript" ></ script >
< script src =
type = "text/javascript" ></ script >
< script src =
type = "text/javascript" ></ script >
</ head >
< body >
< div id = "element" >Hello Geeks for Geeks</ div >
< 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 >
< script src =
type = "text/javascript" ></ script >
< script src =
type = "text/javascript" ></ script >
< script src =
type = "text/javascript" ></ script >
</ head >
< body >
< div id = "element" >Hello Geeks for Geeks</ div >
< 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 >
|
Output: Below show that the Model populates itself with data from API in the format of an object.
MODEL WITH API
Reference: https://backbonejs.org/#API-integration
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...