En este artículo, veremos la colección push de Backbone.js. La colección push de Backbone.js se puede utilizar para agregar el modelo al final de la colección, es decir, simplemente empuja el modelo a la colección.
Sintaxis :
collection.push(models, options)
Parámetros : Tomará 2 parámetros, los cuales se describen a continuación:
- models : el valor de este parámetro se usa para especificar los nombres de las instancias que se insertarán en la colección.
- opciones : este parámetro tiene el tipo de modelo que se agregará a la colección especificada.
Ejemplo 1: En este ejemplo, crearemos un modelo de Comida con 2 elementos y empujaremos nuevamente 2 elementos con el método push() y luego los mostraremos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js push 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_name: "Butter",
food_region: "Hyderabad"
}
});
// 'FoodCollection' is a collection instance and
// '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]);
// Get the elements using JSON.stringify()
document.write('Actual Food : '
+ JSON.stringify(final.toJSON()));
document.write("<br>");
document.write("<br>");
var food3 = new Food({
name: "Icecream",
country: "Hyderabad"
});
var food4 = new Food({
name: "cake/chocos",
country: "Guntur"
});
// Push food3 and food4 model using push
final.push(food3);
final.push(food4);
// Get the elements using JSON.stringify()
document.write('After Pushed : '
+ JSON.stringify(final.toJSON()));
</script>
</body>
</html>
Producción:
Comida real: [{“name”:”Icecream”,”country”:”Hyderabad”,”food_name”:”Butter”,”food_region”:”Hyderabad”}, {“name”:”cake/chocos”,” country”:”Guntur”,”food_name”:”Mantequilla”,”food_region”:”Hyderabad”}] Después de presionar: [{“name”:”Icecream”,”country”:”Hyderabad”,”food_name”:” Mantequilla”,”food_region”:”Hyderabad”}, {“name”:”cake/chocos”,”country”:”Guntur”,”food_name”:”Butter”,”food_region”:”Hyderabad”}, {“ name”:”Icecream”,”country”:”Hyderabad”,”food_name”:”Butter”,”food_region”:”Hyderabad”}, {“name”:”cake/chocos”,”country”:”Guntur” ,”food_name”:”Mantequilla”,”food_region”:”Hyderabad”}]
Ejemplo 2: En este ejemplo, crearemos un modelo de Comida con 2 elementos y empujaremos nuevamente 2 elementos con el método de inserción y luego mostraremos la longitud de la colección.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example of Backbone.js</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_name: 'Butter',
food_region: 'Hyderabad',
},
});
// '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]);
// Get the count of total food using length
document.write('Actual Food Count : ' + final.length);
document.write('<br>');
document.write('<br>');
var food3 = new Food({
name: 'Icecream',
country: 'Hyderabad'
});
var food4 = new Food({
name: 'cake/chocos',
country: 'Guntur'
});
// push food3 and food4 model using pusg
final.push(food3);
final.push(food4);
// Get the count of total food using length
document.write('After Pushed Count : ' + final.length);
</script>
</body>
</html>
Producción:
Actual Food Count : 2 After Pushed Count : 4
Referencia: https://backbonejs.org/#Collection-push
Publicación traducida automáticamente
Artículo escrito por bhanusivanagulug y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA