En este artículo, analizaremos la colección de segmentos de Backbone.js. La colección de sectores de Backbone.js se utiliza para seleccionar los elementos de un modelo o una array de modelos de la colección dada.
Sintaxis :
collection.slice(start,end)
Parámetros : Tomará dos parámetros.
- start se usa para especificar la posición de índice de un elemento inicial que se seleccionará en una array
- end se usa para especificar la posición de índice de un elemento final que se seleccionará en una array
Uso del enlace CDN: una red de entrega de contenido es una red que entrega archivos a los usuarios. Aquí están los CDN para Backbone.js
<script src=”https://code.jquery.com/jquery-2.1.3.min.js” type=”text/javascript”></script> <script src=”http://cdnjs.cloudflare. com/ajax/libs/underscore.js/1.3.3/underscore-min.js” type=”text/javascript”></script> <script src=”http://cdnjs.cloudflare.com/ajax/libs /backbone.js/0.9.2/backbone-min.js” type=”text/javascript”></script>
Ejemplo 1: En este ejemplo, estamos creando una colección con 6 elementos y seleccionando desde el primer índice hasta el cuarto índice.
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>
<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"
});
var food3 = new Food({
name: "milk",
country: "patna"
});
var food4 = new Food({
name: "sugar/chocos",
country: "delhi"
});
var food5 = new Food({
name: "onions",
country: "Hyderabad"
});
var food6 = new Food({
name: "sweets",
country: "delhi"
});
// The add() method adds the models food1, food2,
// food3, food4, food5, food6 to the collection
// instance 'final'
var final = new FoodCollection();
final.add([food1, food2, food3, food4, food5, food6]);
// Select from 0 to 4 th index
var final1 = final.slice(0, 4);
document.write(JSON.stringify(final1))
</script>
</head>
<body></body>
</html>
Producción:
[
{ "name": "Icecream", "country": "Hyderabad", "food_region": "India" },
{ "name": "cake/chocos", "country": "Guntur", "food_region": "India" },
{ "name": "milk", "country": "patna", "food_region": "India" },
{ "name": "sugar/chocos", "country": "delhi", "food_region": "India" }
]
Ejemplo 2: en este ejemplo, estamos creando una colección con 6 elementos y seleccionando desde el segundo índice hasta el quinto í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_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"
});
var food3 = new Food({
name: "milk",
country: "patna"
});
var food4 = new Food({
name: "sugar/chocos",
country: "delhi"
});
var food5 = new Food({
name: "onions",
country: "Hyderabad"
});
var food6 = new Food({
name: "sweets",
country: "delhi"
});
// The add() method adds the models food1,
// food2, food3, food4, food5, food6 to the
// collection instance 'final'
var final = new FoodCollection();
final.add([food1, food2, food3, food4, food5, food6]);
// Select from 2 to 5 th index
var final1 = final.slice(2, 5);
document.write(JSON.stringify(final1))
</script>
</head>
<body></body>
</html>
Producción:
[
{ "name": "milk", "country": "patna", "food_region": "India" },
{ "name": "sugar/chocos", "country": "delhi", "food_region": "India" },
{ "name": "onions", "country": "Hyderabad", "food_region": "India" }
]
Referencia: https://backbonejs.org/#Collection-slice
Publicación traducida automáticamente
Artículo escrito por bhanusivanagulug y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA