JavaScript

Backbone.js Collection push() Method

In this Backbone.js framework tutorial, we will discuss the push() method in the collection class.

Introduction

Backbone.js is a framework that is used to build web applications that follow the style of JavaScript.

It supports models, events, collections, views, and utilities.

Using any of the previous functionalities, we can create and perform different operations on the given data in a web application.

Points to Remember

1. It is used with JavaScript.

2. We can implement the framework inside the <script> tag.

3. This framework supports JavaScript methods and functions like output and reading input.

4. <script> tag is placed inside <head> tag or in <body> tag.

5. It is important to have Content Delivery Network (CDN) links to run the web application on the server.

Let’s See the Structure To Place the Code

<html>

<head>

<script>

You can use Backbone.js framework here

</script>

</head>

<body>

<script>

You can also use Backbone.js framework here

</script>

</body>

</html>

CDN Links are placed with the src attribute of the script tag.

CDN Links

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>

The push() method in the Backbone.js collection adds a model to the collection at the end. It is possible to add a single model (single instance) or an array of models (more than one instance through an array) to the collection.

Syntax:

collection_object.push(model,options)

It takes two parameters.

  1. model is an instance that will be added at the end of the collection.
  2. options parameter is used to specify whether it is a model or an array of models to be added at the end.
Model – collection_object.push(model_instance1)

Array of Models – collection_object.push([model_instance1,model_instance2,………..])

Approach

1. Create a Backbone model using extend() method.

Syntax:

var ModelClass = Backbone.Model.extend();

2. Create a Backbone collection using extend() method and pass the model class.

Syntax:

var CollectionClass = Backbone.Collection.extend({

model: ModelClass

});

3. Create an object or instance for the collection class.

Syntax:

var collection_instance = new CollectionClass();

4. Explore the push() method in the Backbone.js collection.

Let’s discuss several examples of the Backbone.js collection push() method.

Example 1: Push a Single model into the Collection

In this example, we will create a Modal class named – Flowers and create a FlowerCollection collection class. We will pass our model class (Flowers) inside it.

After that, we have to create an instance for the Flowers model with three attributes(flower_name,flower_sepals,flower_petals).

We will create a flower_collection, which is an instance of the FlowerCollection collection. And we will add the instance of the Flower model to the collection instance using the add() method.

Now, we will push a new model instance to the collection using the push() method.

Finally, we are displaying the collection using the toJSON() method.

<html>

<head>

<script src="https://code.jquery.com/jquery-2.1.3.min.js" ></script>

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>

 

</head>

<body>

<center>

<h1>Linux Hint</h1>

</center>

<script>

 

//create Model named Flowers using extend()

var Flowers = Backbone.Model.extend();

 

//create collection - FlowerCollection and and pass Flowers model

var FlowerCollection = Backbone.Collection.extend({

model: Flowers

});

 

//create 1 instance for the Flowers model

var flower1 = new Flowers({flower_name: "lotus", flower_sepals:3,flower_petals:7});

 

 

//create flower_collection

var flower_collection = new FlowerCollection();

 

//add the above model instance to the flower_collection instance using add(() method.

flower_collection.add(flower1);

 

//display the flowers present in the collection

document.write('<strong> Flowers:</strong> ' + JSON.stringify(flower_collection.toJSON()));

 

document.write("<br>");

 

//create 1 instance for the Flowers model

var flower2 = new Flowers({flower_name: "lilly", flower_sepals:13,flower_petals:10});

 

//push flower2 to the collection

flower_collection.push(flower2);

 

//display the flowers present in the collection

document.write('<strong>After Pushing flower2 to Flowers:</strong> ' + JSON.stringify(flower_collection.toJSON()));

 

 

</script>

</body>

</html>

Output:

Run the application in your browser by saving the code in the file with .html as an extension.

Here, the push() method adds the flower2 instance to flower_collection at the end.

Example 2: Push Array of Models to the Collection

In this example, we will create a Modal class named – Flowers and create a FlowerCollection collection class. We will pass our model class (Flowers) inside it.

After that, we have to create an instance for the Flowers model with three attributes(flower_name,flower_sepals,flower_petals).

We will create a flower_collection, which is an instance to the FlowerCollection collection. And we will add three instances of the Flower model to the collection instance using the add() method.

Now, we will push two model instances to the collection using the push() method.

Finally, we are displaying the collection using the toJSON() method.

<html>

<head>

<script src="https://code.jquery.com/jquery-2.1.3.min.js" ></script>

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>

 

</head>

<body>

<center>

<h1>Linux Hint</h1>

</center>

<script>

 

//create Model named Flowers using extend()

var Flowers = Backbone.Model.extend();

 

//create collection - FlowerCollection and and pass Flowers model

var FlowerCollection = Backbone.Collection.extend({

model: Flowers

});

 

//create 3 instances for the Flowers model

var flower1 = new Flowers({flower_name: "lotus", flower_sepals:3,flower_petals:7});

var flower2 = new Flowers({flower_name: "lilly", flower_sepals:10,flower_petals:17});

var flower3 = new Flowers({flower_name: "rose", flower_sepals:3,flower_petals:1});

 

 

//create flower_collection

var flower_collection = new FlowerCollection();

 

//add the above flower1 instance to the flower_collection instance using add(() method.

flower_collection.add(flower1);

 

//display the flowers present in the collection

document.write('<strong>Existing:</strong> ' + JSON.stringify(flower_collection.toJSON()));

 

document.write("<br>");

//push flower2 and flower3 to the collection.

flower_collection.push([flower2,flower3]);

 

//display the flowers present in the collection

document.write('<strong>After pushing flower2 and flower3:</strong> ' + JSON.stringify(flower_collection.toJSON()));

 

document.write("<br>");

</script>

</body>

</html>

Output:

Run the application in your browser by saving the code in the file with .html as an extension.

Here, we can see the push() method added the flower2 and flower3 to the collection at the end.

Conclusion

In this Backbone.js tutorial, we discussed the push() method in collection. It is used to add models to the collection at the end. If there are more than one instance of a model to be pushed, then you can use an array inside the push() method and pass models to the push() method through the array.

About the author

Gottumukkala Sravan Kumar

B tech-hon's in Information Technology; Known programming languages - Python, R , PHP MySQL; Published 500+ articles on computer science domain