Backbone.js fetch Collection se utiliza para obtener el conjunto de modelos del servidor para su recopilación . Cuando se devuelven los modelos, los modelos se fusionan con los modelos existentes. Si queremos restablecer todos los modelos y formar nuevos modelos, usamos la opción {restablecer: verdadero} de este método que restablece la colección.
Sintaxis:
collection.fetch( options );
Parámetros:
- opciones: este hash de opción toma devoluciones de llamada de éxito y error que serán en caso de estado de respuesta del servidor.
Ejemplo 1: En este ejemplo, ilustraremos la colección de recuperación de Backbone.js. Aquí usaremos el método fetch() y que llamará al método de sincronización de la colección que imprimirá los modelos de la colección.
HTML
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS fetch Router</title>
<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.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>BackboneJS fetch Router</h3>
<script type="text/javascript">
var Book = Backbone.Model.extend();
var b1 = {
title: "Ram",
Author: "Amish Tripathi",
vol: 1
};
var b2 = {
title: "Lolita",
Author: "Vladimir Nabokov",
vol: 2
};
var b3 = {
title: "The Palace of Illusion",
Author: "Chitra Banerjee",
vol: 1
};
var books = Backbone.Collection.extend({
model: Book,
});
var Library = new books([b1, b2, b3]);
Backbone.sync = function (method, model) {
for (let x of model.models)
document.write(JSON.stringify(x), '<br>');
};
Library.fetch();
</script>
</body>
</html>
Producción:
Colección de obtención de Backbone.js
Ejemplo 2: En este ejemplo, buscaremos los datos de la API, analizaremos los datos y obtendremos el nombre de usuario de cada dato.
HTML
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS fetch collection</title>
<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.8.2/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>BackboneJS fetch collection</h3>
<div id='para'></div>
<script type="text/javascript">
function user_Name(user) {
console.log(user.username);
}
var post = Backbone.Model.extend();
var posts = Backbone.Collection.extend({
model: post,
url: "jsondata/users",
parse: function (response, options) {
_.each(response, user_Name);
}
});
var comments = new posts();
comments.fetch();
</script>
</body>
</html>
Producción:
Colección de obtención de Backbone.js
Referencia: https://backbonejs.org/#Collection-fetch
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA