15. Learn backbone.js tutorial from scratch for beginners(Part 18) Collection Events in backbone.js

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();
  MycollectionObj.add(model1);
  var ModelView = Backbone.View.extend({
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		console.log(this.collection.toJSON());
  	}
  });
  vmodel = new ModelView();
});

Tương tự unshift thêm vào đằng trước collecttion, add thêm vào đằng sau collection

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();
  MycollectionObj.unshift(model1);
  MycollectionObj.unshift(model2);
  var ModelView = Backbone.View.extend({
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		console.log(this.collection.toJSON());
  	}
  });
  vmodel = new ModelView();
});

Tương tự remove

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();
  MycollectionObj.add(model1);
  MycollectionObj.add(model2);
  MycollectionObj.remove(model2);
  var ModelView = Backbone.View.extend({
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		console.log(this.collection.toJSON());
  	}
  });
  vmodel = new ModelView();
});

Tương tự pop, shift rời phần tử cuối, đầu :)

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();
  MycollectionObj.add(model1);
  MycollectionObj.add(model2);
  MycollectionObj.pop();
  MycollectionObj.shift();
  var ModelView = Backbone.View.extend({
  	collection: MycollectionObj,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		console.log(this.collection.toJSON());
  	}
  });
  vmodel = new ModelView();
});