Backbone.js es una biblioteca ligera para estructurar código JavaScript. También se considera como el tipo de marco MVC/MV*. Si no está familiarizado con MVC, es básicamente un patrón de arquitectura para implementar interfaces de usuario. Backbone.js también proporciona el concepto llamado enrutador. Se utiliza para desarrollar aplicaciones de una sola página. Una aplicación de una sola página es un tipo de aplicación web que cabe en una sola página web. Con el objetivo de proporcionar una rica experiencia de usuario similar a las aplicaciones de escritorio.
Backbone ya está configurado para comunicarse con una API RESTful. Podemos usar la API como enlace para el recurso de datos en nuestro Backbone. Simplemente cree una nueva colección con la URL de su punto final de recursos:
Sintaxis:
var colección = Backbone.Collection.extend( { URL: ‘https://gfg.com’} );
Propiedades:
- URL: aquí la URL es el enlace donde residen los recursos.
Los componentes Colección y modelo juntos forman un recurso REST de asignación directa utilizando el siguiente método.
- fetch(): La función obtiene los datos de la URL.
- create(): Función para publicar los datos.
- destroy(): Para borrar los datos.
Ahora veamos cuándo obtenemos datos del recurso y cómo la colección y el modelo dan formato a los datos del recurso.
Ejemplo 1: este ejemplo ilustrará la integración de la API con la colección:
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>
Salida: Aquí la función Coll_car.fetch() es equivalente a Obtener solicitud. El siguiente resultado muestra que Collection lo llena con el modelo en el formato de Array.
COLECCIÓN CON API.
Ejemplo 1: este ejemplo ilustrará la integración de la API con el modelo
Cuando obtenemos datos JSON sin procesar de una API, un modelo se completará automáticamente con datos formateados como un objeto. El siguiente código ilustrará cómo usar los enlaces API como fuente de datos.
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>
Salida: a continuación, se muestra que el modelo se completa con datos de la API en el formato de un objeto.
MODELO CON API
Referencia: https://backbonejs.org/#API-integration
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA