Backbone.js API Integration
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 Beginner 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 Beginner for Beginner</ 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.
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 Beginner 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 Beginner for Beginner</ 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 > |
Output: Below show that the Model populates itself with data from API in the format of an object.
Reference: https://backbonejs.org/#API-integration
Contact Us