> 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/16.-learn-backbone.js-tutorial-from-scratch-for-beginners-part-19-collection-to-underscore.js-templ.md).

# 16. Learn backbone.js tutorial from scratch for beginners(Part 19) Collection to underscore.js templ

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MS6LPiYzwTiXIubAC8M%2F-MS6SPYbv7O7wPTgPI0E%2FScreenshot_1.jpg?alt=media\&token=bcd41b8b-5593-4c03-8b42-a9ca458c69a1)

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({
  	el: '#div1',
  	template: _.template($("#ourTemplate").html()),
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		this.$el.html(this.template({
  			collection: this.collection.toJSON()
  		}));
  	}
  });
  vmodel = new ModelView();
});
```

C:\Users\Administrator\Desktop\gulp\index.html

```
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({
  	el: '#div1',
  	template: _.template($("#ourTemplate").html()),
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		this.$el.html(this.template({
  			collection: this.collection.toJSON()
  		}));
  	}
  });
  vmodel = new ModelView();
});
```