In this article, we will discuss the Backbone.js slice collection. The Backbone.js slice collection is used to select the elements from a model or an array of models from the given collection.
Syntax:
collection.slice(start,end)
Parameters: It will take two parameters.
- start is used to specify the index position of an starting element to be selected in an array
- end is used to specify the index position of an ending element to be selected in an array
Using the CDN Link: A content delivery network is a network that serves files to users. Here are the CDNs for 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>
Example 1: In this example, we are creating a collection with 6 elements and selecting from the first index to the fourth index.
HTML
<!DOCTYPE html><html><head> <title>Example of Backbone.js</title> type="text/javascript"></script> <script src= type="text/javascript"></script> <script src= 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> |
Output:
[
{ "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" }
]
Example 2: In this example, we are creating a collection with 6 elements and selecting from the 2nd index to the 5th index.
HTML
<!DOCTYPE html><html><head> type="text/javascript"></script> <script src= type="text/javascript"></script> <script src= 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> |
Output:
[
{ "name": "milk", "country": "patna", "food_region": "India" },
{ "name": "sugar/chocos", "country": "delhi", "food_region": "India" },
{ "name": "onions", "country": "Hyderabad", "food_region": "India" }
]
Reference: https://backbonejs.org/#Collection-slice
