Backbone.js slice Collection
Last Updated :
13 Jun, 2022
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>
<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>
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>
<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>
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
Similar Reads
Backbone.js set Collection
The Backbone.js set collection is used to update a model or an array of models in the given collection. If the model is not there, then it will create a model with given values, Syntax: collection.set(models,options) Parameters: It will take two parameters. models: This is the first parameter which
3 min read
Backbone.js sync Collection
The Backbone.js sync Collection is the function that the collection calls every time attempts to request the server. When a collection begins a sync with the server, a request event is emitted. If the request completes successfully you’ll get a sync event and an error event if not. Syntax: collectio
2 min read
Backbone.js pluck Collection
The Backbone.js pluck Collection is used to Pluck an attribute from each model in the collection. This method is equivalent to the map function and returns a single attribute value from each model. This method takes the attribute name as a parameter that has to get from the model. Syntax: collection
2 min read
Backbone.js parse Collection
The Backbone.js parse Collection is a method that is called by Backbone whenever a Collection's models are returned by the server. The default implementation simply passes the JSON response. We can override it with a new logic to flexibly parse the response. Syntax: collection.parse( response , op
2 min read
Backbone.js shift Collection
In this article, we will discuss Backbone.js shift collection. The Backbone.js pop collection is used to remove and return the first model from the given collection. Syntax: collection.pop(models, options) Parameters: It will take one parameter. options: This parameter takes the model type which wil
3 min read
Backbone.js url Collection
The Backbone.js url Collection is the property or function of a collection which is the reference to the location where the data in the server is located. The url property of collection is used by all the models of collection to construct the url to fetch the data. Syntax: collection.url or collec
2 min read
Backbone.js reset Collection
The Backbone.js reset Collection is used to replace the whole list of models with a new list of models or attributes hash. This function returns newly set models in the collection. We can pass null in place of models to make the collection empty. Syntax:Â collection.reset( models, options ); Paramet
2 min read
Backbone.js length Collection
In this article, we will discuss Backbone.js length collection. The Backbone.js length collection is used to return the total number of elements/values present in the model collection. Syntax: Backbone.Collection.length Parameters: It takes no parameters. Example 1: In this example, we will create a
2 min read
Backbone.js push Collection
In this article, we will see the Backbone.js push Collection. The Backbone.js push Collection can be utilized to add the model to the collection's end i.e. it simply pushes the model to the collection. Syntax: collection.push(models, options) Parameters: It will take 2 parameters, which are describe
3 min read
Backbone.js Collections
A Backbone.js Collections are a group of related models. It is useful when the model is loading to the server or saving to the server. Collections also provide a helper function for performing computation against a list of models. Aside from their own events collections also proxy through all of the
2 min read