I've started to look at various Design Patterns in JavaScript and one of most popular Design Patterns in any language is the MVC Pattern. In JavaScript, there are various libraries out there which helps in modularizing the application. However, I've heard a lot about Backbone.js and I thought this would be the right time to give it a try. I've not learnt Backbone completely, but I've gained a good understanding of the Model part of the MVC in Backbone.
To build a Model, you would extend Backbone.Model and provide instance properties like - defaults, validate, initialize etc,. I assumed that if the validate function is defined, it would be invoked whenever an instance of the Model is created, but this was not true. To overcome this, I tried to call validate method in initialize but this did not suffice the purpose, since this function (initialize) was called after the Model was created. On reading further and on trying out some options I understood that the validate function is called whenever a user tries to set a property on the Model (carObj.set('property',value)):
As seen in the above code snippet, an instance of Car is created even though the 'color' attribute is not specified. Here's the console output:
Although you can call isValid function on the object (carObj.isValid()) and validate the Model once it has been created, but I wanted the Model to validate the data before returning an instance of it. I added a constructor property to the object and was able to validate the data there:
As you can see, I'm overriding the constructor function. Here I'm calling the validate method in constructor and checking whether the data is valid, if any of the required arguments are not present then the validate method would return a string 'Error Occurred'. The constructor would then return an empty object.
It is important to note that since we are overriding the constructor property and providing our own implementation, we need to call the parent constructor (Backbone.Model) explicitly to initialize the Model, this would then construct the object and invoke the initialize method.
To build a Model, you would extend Backbone.Model and provide instance properties like - defaults, validate, initialize etc,. I assumed that if the validate function is defined, it would be invoked whenever an instance of the Model is created, but this was not true. To overcome this, I tried to call validate method in initialize but this did not suffice the purpose, since this function (initialize) was called after the Model was created. On reading further and on trying out some options I understood that the validate function is called whenever a user tries to set a property on the Model (carObj.set('property',value)):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Create a Car Model | |
var Car = Backbone.Model.extend({ | |
//Validate the Car Model | |
validate: function(attr) { | |
if( !(attr.brand && attr.model && attr.color) ) { | |
return "Error Occurred"; | |
} | |
}, | |
//Initialize is called after the Model object is constructed | |
initialize: function() { | |
//if there's an validation error invoke this function | |
this.bind("error", function (model, error) { | |
console.log(error); | |
}); | |
console.log('Inside initialize'); | |
} | |
}); | |
//Create an instance of Car | |
var carObj = new Car({brand: 'Ford', model: 'Figo'}); | |
//carObj is created successfully | |
console.log(carObj); | |
//check if it is valid | |
console.log('Is Model valid: ' + carObj.isValid()); | |
//This will throw an error | |
carObj.set({name: 'Honda'}); |
Inside initialize
d {attributes: Object, _escapedAttributes: Object, cid: "c0", changed: Object, _silent: Object…}
_callbacks: Object
_escapedAttributes: Object
_pending: Object
_previousAttributes: Object
_silent: Object
attributes: Object
brand: "Ford"
model: "Figo"
__proto__: Object
changed: Object
cid: "c0"
__proto__: x
Is Model valid: false
Error Occurred
Although you can call isValid function on the object (carObj.isValid()) and validate the Model once it has been created, but I wanted the Model to validate the data before returning an instance of it. I added a constructor property to the object and was able to validate the data there:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Create a Car Model | |
var Car = Backbone.Model.extend({ | |
//Validate the Car Model | |
validate: function(attr) { | |
if( !(attr.brand && attr.model && attr.color) ) { | |
return "Error Occurred"; | |
} | |
}, | |
//Initialize is called after the Model object is constructed | |
initialize: function() { | |
//if there's an validation error invoke this function | |
this.bind("error", function (model, error) { | |
console.log(error); | |
}); | |
console.log('Inside initialize'); | |
}, | |
//Override the constructor | |
constructor: function (attributes, options) { | |
console.log('Inside constructor') | |
//validate the attributes | |
var validationMsg= this.validate(attributes); | |
//if validate method returns an error message | |
if(validationMsg) | |
return {}; | |
else | |
//call the Backbone.Model constructor | |
Backbone.Model.prototype.constructor.call(this, attributes); | |
} | |
}); |
It is important to note that since we are overriding the constructor property and providing our own implementation, we need to call the parent constructor (Backbone.Model) explicitly to initialize the Model, this would then construct the object and invoke the initialize method.
Comments
Post a Comment