I recently came across a Backbone.js plugin called Backbone.Mutators. It’s an awesome but simple design pattern to utilize in your applications and the minified library is pretty small. By including this library in your application, you can adhere to a standard method of retrieving properties out of Backbone models. For instructions or examples on how include the library in your project, either view the README.md or clone my repo. Below are some examples exploring Backbone.Mutators.
If you clone the Exploring-Backbone.Mutators repository, you can view and run unit tests for each the below examples.
For our examples, we’ll model our data on Major League Baseball (MLB) and their teams/players.
We’ll start with a real basic example:
ibjhb.mvc.model.Team = Backbone.Model.extend({
initialize : function(model) {
return this;
}
,mutators : {
teamName : function(){
return this.city + ' ' + this.nickname;
}
}
});
var team = new window.ibjhb.mvc.model.Team({
city : 'Tampa Bay'
,nickname : 'Rays'
});
team.get('teamName') // New York Yankees
This example is very basic but it demonstrates the use of get() instead of creating functions like team.getTeamName();. This may not seem like a big change, but when using in an application or unit testing, it’s a huge difference.
In our next example, we’ll calculate and return the batting average of a player:
ibjhb.mvc.model.Player = Backbone.Model.extend({
initialize : function(model) {
return this;
}
,mutators : {
battingAverage : function(){
var multiple = Math.pow(10, 3);
return (Math.round((this.hits / this.at_bats) * multiple) / multiple);
}
}
});
var player = new window.ibjhb.mvc.model.Player({
name : 'Evan Longoria'
,at_bats : 55
,hits : 14
});
player.get('battingAverage'); // .255
This value corresponds to the Evan’s statistics.
In our final example, we’re going to convert the player object to JSON using the Backbone.js toJSON() function:
ibjhb.mvc.model.Player = Backbone.Model.extend({
initialize : function(model) {
return this;
}
,mutators : {
battingAverage : function(){
var multiple = Math.pow(10, 3);
return (Math.round((this.hits / this.at_bats) * multiple) / multiple);
}
}
});
var player = new window.ibjhb.mvc.model.Player({
name : 'Evan Longoria'
,at_bats : 55
,hits : 14
});
console.log(player.toJSON());
When you view your console log, you’ll see the ‘battingAverage’ property is included:
{
name : 'Evan Longoria'
,at_bats : 55
,hits : 14
,battingAverage : 0.255
}
This is very cool! This is where some of the power of the library is apparent. When you put this returned value under unit test, you can test a large number of values very quickly.
If you’ve been using Backbone.js at all, these examples are relatively simple but if you use this library, they illustrate a shift in how you design your models. I’m going to start using it in all my projects.
ibjhb: +1...