> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/14.-learn-backbone.js-tutorial-from-scratch-for-beginners-part-17-collection-in-backbone-js.md).

# 14. Learn backbone.js tutorial from scratch for beginners(Part 17) Collection in backbone js

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS4F_iTENrYtokTdLx4%2F-MS4M5SCy-vW4PGLmlbZ%2FScreenshot_2.jpg?alt=media\&token=4cdba57c-7f70-4ab4-9a50-d1a372a0c5e5)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS63cVXSwOMCMpBzSB3%2F-MS65RSAn0q7bAqHHB3X%2FScreenshot_1.jpg?alt=media\&token=971cd8d8-6e22-4455-affe-ff9078c03979)

```
1. A collection is a ordered set of models
2. It is used to deal with a group of related models
3. It handles the loading and saving of new models to the server
4. It provides helper functions to perform aggregation and computation against a list of models
5. You can create your own collection by extending the backbone's collection class
```

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS675WdpHZqy4Ef_dEs%2F-MS6ANH6cHIKT_JgSeTY%2FScreenshot_3.jpg?alt=media\&token=eefadb31-4f7a-4606-a6a2-d7fc906b37a1)

C:\Users\Administrator\Desktop\gulp\app.js

```
jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
  	defaults: {
  		name: 'Lionel',
  		team: "Viet Nam",
  		no: 10
  	}
  });
  
  var model1 = new FirstModel({
  	name: 'Lionel 1',
  	team: "Viet Nam",
  	no: 16
  });
  var model2 = new FirstModel({
  	name: 'Lionel 2',
  	team: "Viet Nam",
  	no: 17
  });
  var model3 = new FirstModel({
  	name: 'Lionel 3',
  	team: "Viet Nam",
  	no: 18
  });
  var MyCollection =  Backbone.Collection.extend({
  	model: FirstModel
  });
  var MycollectionObj = new MyCollection(model1);
  var ModelView = Backbone.View.extend({
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		console.log(this.collection.toJSON());
  	}
  });
  vmodel = new ModelView();
});
```

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS6AVk6391ruMID07sn%2F-MS6AoSV4frIoy8EHRMg%2FScreenshot_4.jpg?alt=media\&token=5e188416-c90e-4f7c-b02f-f8f4e7ebbcb5)

C:\Users\Administrator\Desktop\gulp\app.js

```
jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
  	defaults: {
  		name: 'Lionel',
  		team: "Viet Nam",
  		no: 10
  	}
  });
  
  var model1 = new FirstModel({
  	name: 'Lionel 1',
  	team: "Viet Nam",
  	no: 16
  });
  var model2 = new FirstModel({
  	name: 'Lionel 2',
  	team: "Viet Nam",
  	no: 17
  });
  var model3 = new FirstModel({
  	name: 'Lionel 3',
  	team: "Viet Nam",
  	no: 18
  });
  var MyCollection =  Backbone.Collection.extend({
  	model: FirstModel
  });
  var MycollectionObj = new MyCollection([model1,model2,model3]);
  var ModelView = Backbone.View.extend({
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		console.log(this.collection.toJSON());
  	}
  });
  vmodel = new ModelView();
});
```

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS6AVk6391ruMID07sn%2F-MS6CqoWU8tLiunH0GUy%2FScreenshot_5.jpg?alt=media\&token=a84cfaff-e129-41d5-932a-d2abb25ab2c9)

C:\Users\Administrator\Desktop\gulp\app.js

```
jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
  	defaults: {
  		name: 'Lionel',
  		team: "Viet Nam",
  		no: 10
  	}
  });
  
  var model1 = new FirstModel({
  	name: 'Lionel 1',
  	team: "Viet Nam",
  	no: 16
  });
  var model2 = new FirstModel({
  	name: 'Lionel 2',
  	team: "Viet Nam",
  	no: 17
  });
  var model3 = new FirstModel({
  	name: 'Lionel 3',
  	team: "Viet Nam",
  	no: 18
  });
  var MyCollection =  Backbone.Collection.extend({
  	model: FirstModel
  });
  var MycollectionObj = new MyCollection([model1,model2,model3]);
  var ModelView = Backbone.View.extend({
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		_.each(this.collection.toJSON(), function(model) {
  			console.log("Name: " + model.name + ",Team: " + model.team + ",Number is: " + model.no);
  		});
  	}
  });
  vmodel = new ModelView();
});
```