En este artículo, discutiremos Backbone.js en la colección. La colección Backbone.js at se usa para devolver el modelo de la colección dada especificando el índice. La indexación comienza con 0.
Sintaxis:
collection.at(models,options)
Parámetros: Tomará dos parámetros.
- modelos: este es el primer parámetro que se usa para especificar los nombres de las instancias que se insertarán en la colección,
- opciones: este parámetro toma el tipo de modelo que se agregará a la colección especificada {at:index} .
Ejemplo 1: En este ejemplo, devolveremos los primeros valores de índice.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<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"
}
});
// 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"
});
var food3 = new Food({
name: "Icecream",
country: "Hyderabad"
});
var final = new FoodCollection();
final.add([food1, food2, food3]);
var food4 = new Food({
name: "cake/chocos",
country: "Guntur"
});
final.add(food4, { at: 0 });
document.write('New Values: ' +
JSON.stringify(final.toJSON()));
</script>
</head>
<body></body>
</html>
Producción:
New Values: [{
"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":"Butter",
"food_region":"Hyderabad"
},
{
"name":"Icecream",
"country":"Hyderabad",
"food_name":"Butter",
"food_region":"Hyderabad"
}]
Ejemplo 2: En este ejemplo, devolveremos los últimos valores de índice.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<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"
}
});
// 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"});
var food3 = new Food({name: "Icecream",
country:"Hyderabad"});
var final = new FoodCollection();
final.add([food1,food2,food3]);
var food4 = new Food({name: "cake/chocos",
country:"Guntur"});
final.add(food4,{at:3});
document.write( 'New Values: ' +
JSON.stringify(final.toJSON()));
</script>
</head>
<body></body>
</html>
Producción:
New Values: [{
"name":"Icecream",
"country":"Hyderabad",
"food_name":"Butter",
"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":"Butter",
"food_region":"Hyderabad"
}]
Publicación traducida automáticamente
Artículo escrito por bhanusivanagulug y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA