Las colecciones de Backbone.js son un grupo de modelos relacionados. Es útil cuando el modelo se carga en el servidor o se guarda en el servidor. Las colecciones también proporcionan una función auxiliar para realizar cálculos en una lista de modelos. Además de sus propias colecciones de eventos, también representan todos los eventos que ocurren en el modelo dentro de ellas, lo que le permite escuchar en un solo lugar cualquier cambio que pueda ocurrirle a cualquier modelo de la colección.
Ahora vamos a ver el funcionamiento de las colecciones.
Sintaxis: podemos crear una colección con sintaxis extendida de la siguiente manera
let colección = Backbone.Collection.extend (Propiedades, [ClassProperties]);
Propiedades:
- Propiedades: Estas son las propiedades que se asignan a la instancia de colección cuando se inicia.
- Propiedades de clase: estas son las propiedades que se adjuntan a la función constructora de la colección.
Ejemplo 1: en este ejemplo, crearemos una colección y pasaremos el argumento como una lista de modelos que crean la array. El siguiente código muestra cómo podemos agregar una lista de modelos en la creación de la Colección.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Backbone.js Collections</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>
<!-- Javascript code -->
<script type="text/javascript">
var car = Backbone.Model.extend();
var collection = Backbone.Collection.extend({
model: car,
});
let l = [new car({ Brand: "BMW", color: "blue" }),
new car({ Brand: "Audi", color: " red" })]
var Coll_car = new collection(l);
console.log(JSON.stringify(Coll_car));
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, crearemos una colección y agregaremos el modelo a la colección con el método add.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Backbone.js Collections</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>
<!-- Javascript code -->
<script type="text/javascript">
var car = Backbone.Model.extend();
var collection = Backbone.Collection.extend({
model: car,
});
var Coll_car = new collection();
Coll_car.add(new car({ Brand: "BMW", color: "blue" }))
Coll_car.add(new car({ Brand: "Audi", color: " red" }))
Coll_car.add(new car({ Brand: "Verna", color: "black" }))
Coll_car.add(new car({ Brand: "Tata nano", color: "green" }))
console.log(Coll_car);
</script>
</body>
</html>z
Producción:
AGREGAR MODELO CON AGREGAR MÉTODO
Referencia: https://backbonejs.org/#Collection
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA