La colección de complementos Backbone.js se utiliza para incluir un modelo o una array de modelos en la colección dada. Toma el modelo como primer parámetro y las opciones como segundo parámetro. En este artículo, analizaremos la colección de complementos Backbone.js.
Sintaxis :
collection.add(models, [options])
Valores de Parámetros : Acepta 2 parámetros, que se describen a continuación:
- models : este parámetro se usa para especificar los nombres de las instancias que se agregan a la colección.
- opciones : este parámetro toma el tipo de modelo que se agregará a la colección dada.
Ejemplo 1: en este ejemplo, estamos agregando 2 elementos a una array de colección.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js add 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.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
// 'Food' is a model and that contains the
// default value for the model
var Food = Backbone.Model.extend({
defaults: {
food_region: "India"
}
});
// Here the 'FoodCollection' is a collection instance and
// model 'Food' is specified by overriding the 'model' property
var FoodCollection = Backbone.Collection.extend({
model: Food
});
// The instances "food1" and "food2" are created
// for the model "Food"
var food1 = new Food({
name: "Icecream",
country: "Hyderabad"
});
var food2 = new Food({
name: "cake/chocos",
country: "Guntur"
});
// The add() method adds the models 'food1' and 'food2'
// to the collection instance 'final'
var final = new FoodCollection();
final.add([food1, food2]);
// Display the items in the collection
document.write("Values :", JSON.stringify(final.toJSON()));
document.write("<br>");
</script>
</body>
</html>
Producción:
Values :
[{"name":"Icecream","country":"Hyderabad","food_region":"India"},
{"name":"cake/chocos","country":"Guntur","food_region":"India"}]
Ejemplo 2: en este ejemplo, agregaremos 2 elementos nuevamente
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js add 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.1.2/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
// 'Food' is a model and that contains the
// defualt value for the model
var Food = Backbone.Model.extend({
defaults: {
food_region: "India"
}
});
// Here the 'FoodCollection' is a collection instance and model
// 'Food' is specified by overriding the 'model' property
var FoodCollection = Backbone.Collection.extend({
model: Food
});
// The instances "food1" and "food2" are created for
// the model "Food"
var food1 = new Food({
name: "Icecream",
country: "Hyderabad"
});
var food2 = new Food({
name: "cake/chocos",
country: "Guntur"
});
// The add() method adds the models 'food1' and
// 'food2' to the collection instance 'final'
var final = new FoodCollection();
final.add([food1, food2]);
// Display the items in the collection
document.write("Values : ", JSON.stringify(final.toJSON()));
document.write("<br>");
document.write("<br>");
var food3 = new Food({
name: "fish",
country: "delhi"
});
var food4 = new Food({
name: "onions",
country: "indore"
});
final.add([food3, food4]);
document.write("Values again added: ",
JSON.stringify(final.toJSON()));
</script>
</body>
</html>
Producción:
Values :
[{"name":"Icecream","country":"Hyderabad","food_region":"India"},
{"name":"cake/chocos","country":"Guntur","food_region":"India"}]
Values again added:
[{"name":"Icecream","country":"Hyderabad","food_region":"India"},
{"name":"cake/chocos","country":"Guntur","food_region":"India"},
{"name":"fish","country":"delhi","food_region":"India"},
{"name":"onions","country":"indore","food_region":"India"}]
Referencia: https://backbonejs.org/#Collection-add
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA