11. Learn backbone.js tutorial from scratch for beginners(Part 14) Model Change Events in backbone.j

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: "Tuong",
  	team: "Solution",
  	age: 0
  });
  var ModelView = Backbone.View.extend({
  	model: fmodel,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {
  		
  	}
  });
  vmodel = new ModelView();
});

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: "Tuong",
  	team: "Solution",
  	age: 10
  });
  var ModelView = Backbone.View.extend({
  	model: fmodel,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {
  		// this.model.on("change", function() {
  		// 	console.log("change at View");
  		// });
  		this.model.on("change:name", function() {
  			console.log("change at View Name");
  		});	
  	}
  });
  vmodel = new ModelView();
});

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: "Tuong",
  	team: "Solution",
  	age: 10
  });
  var ModelView = Backbone.View.extend({
  	model: fmodel,
  	initialize: function() {
  		this.render();
  	},
  	render: function() {	
  		this.model.bind('change:name', this.bindModelChangeEvent);
  	},
  	bindModelChangeEvent: function(event) {
  		console.log('bindModelChangeEvent');
  	}
  });
  vmodel = new ModelView();
});

Last updated

Navigation

Lionel

@Copyright 2023