12. Learn backbone.js tutorial from scratch for beginners(Part 15) More Model Events and listenTo ev

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

jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
    initialize: function() {
    	// this.bind('change',function(){
    	// 	console.log('bind change');
    	// });
    	this.bind('change:name',function(){
    		console.log('bind change');
    	});
    }
  });
  fmodel = new FirstModel({
  	
  });
  fmodel.set({
  	name: "Clone fmodel",
  	team: "Solution",
  	age: 10
  });
  var fmodel2 = fmodel.clone();
  var ModelView = Backbone.View.extend({
  	model: fmodel2,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		console.log(this.model.toJSON());
  	},
  });
  vmodel = new ModelView();
});

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

jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
    initialize: function() {
    	
    }
  });
  fmodel = new FirstModel({
  	
  });
  fmodel.set({
  	name: "Clone fmodel",
  	team: "Solution",
  	age: 10
  });
  var fmodel2 = fmodel.clone();
  var ModelView = Backbone.View.extend({
  	model: fmodel2,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		fmodel2.set({
  			name: "Change name"
  		});
  		if(fmodel2.hasChanged()) {
  			console.log("hasChanged");
  		}else {
  			console.log("Not hasChanged");
  		}
  	},
  });
  vmodel = new ModelView();
});

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

jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
    initialize: function() {
    	
    }
  });
  fmodel = new FirstModel({
  	
  });
  fmodel.set({
  	name: "Clone fmodel",
  	team: "Solution",
  	age: 10
  });
  var fmodel2 = fmodel.clone();
  var ModelView = Backbone.View.extend({
  	model: fmodel2,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		fmodel2.set({
  			name: "changedAttributes"
  		});
  		if(fmodel2.hasChanged()) {
  			console.log(fmodel2.changedAttributes());
  		}else {
  			console.log("Not hasChanged");
  		}
  	},
  });
  vmodel = new ModelView();
});

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

jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
    initialize: function() {
    	
    }
  });
  fmodel = new FirstModel({
  	
  });
  fmodel.set({
  	name: "Clone fmodel",
  	team: "Solution",
  	age: 10
  });
  var fmodel2 = fmodel.clone();
  var ModelView = Backbone.View.extend({
  	model: fmodel2,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		fmodel2.set({
  			name: "changedAttributes"
  		});
  		if(fmodel2.hasChanged()) {
  			console.log(fmodel2.previous("name"));
  			console.log(fmodel2.previousAttributes("name"));
  			console.log(fmodel2.changedAttributes());
  		}else {
  			console.log("Not hasChanged");
  		}
  	},
  });
  vmodel = new ModelView();
});

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

jQuery(document).ready(function($) {
  var FirstModel = Backbone.Model.extend({
    initialize: function() {
    	
    }
  });
  fmodel = new FirstModel({
  	
  });
  fmodel.set({
  	name: "Clone fmodel",
  	team: "Solution",
  	age: 10
  });
  var ModelView = Backbone.View.extend({
  	model: fmodel,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		this.listenTo(this.model, 'change',this.listenToModelChange);
  	},
  	listenToModelChange: function() {
  		console.log('listenToModelChange');
  	}
  });
  vmodel = new ModelView();
});

Last updated

Navigation

Lionel

@Copyright 2023