Playing with Models in Backbone.js

Yeah finally I got my hands dirty on Backbone.js and this time I’m also going to share to you what I’ve learned about backbone.js models.

Models in backbone.js is pretty much like the models in the MVC in server-side scripting language like PHP. If you aren’t familiar with the Models in the server-side they’re used for representing the data in the database. It’s a place where queries are being written. In simple terms data manipulation and retrieval happens in the Model.

But here were talking about the Models in the client-side particularly the Models used in Backbone.js. As I have said earlier they’re pretty much the same with the Models you used in the server-side in the sense that they also represent or store data temporarily.

If you want to learn the basics of Backbone.js before digging into this tutorial scroll all the way to the bottom and you will find some of the Backbone.js resources that I recommend.



  • jQuery – for dom manipulation and event delegation
  • Underscore.js – hard dependency of Backbone.js
  • Backbone.js – gives structure to JavaScript applications



What we will be working on today is a very simple application that allows us to add people on a table. Feel free to put on some css if you want because this really looks very ugly without the styling.


Of course I’m only going to teach you how to use Models in Backbone.js in this tutorial as you might not know I’m also learning Backbone.js as I write this tutorial so this very simple application is going to evolve in simply making use of Models to using all the basic components of Backbone.js like the Views, Collections, and Routers at the end of this series of tutorials were also going to connect our application to Couch DB a NoSQL Database which uses JSON to store data.



First you need to include the scripts that we need on the head portion.

<script src="jquery171.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>

Note that jQuery isn’t actually required if you have other means of manipulating the DOM, another library that you might be using then use it instead of jQuery.



Next is the markup where we are going to input the name and the age of the person:

<label for="name">Name:</label>
<input type="text" id="name"/>

<label for="age">Age:</label>
<input type="text" id="age"/>

<input type="button" id="btn_save" value="save"/>

Then the container for the table:

<div id="container">



Were not ready to create a new Model which we are going to temporarily store the name and age of the person.

var people = Backbone.Model.extend({


Inside the people Model is the constructor, this isn’t required but we need to be able to see something when a new people object is created. This is also the best place to put listeners. As the name suggests the listeners are simply used to monitor the value of a certain data in the model.

initialize: function(){


Inside the constructor you need to bind the error event. This simply listens to the


Next is the defaults or the default attributes and values that you want to add on your Model. These are simply the fields in a table when were comparing it to a database.

	names 	: [], //stores all the names
	ages	: [], //stores all the ages
	name 	: '', //will store the current value of name
	age	: '' //will store the current value of age

Next is the validate method. As the name suggests this method is where we put the validation logic for our model. This is where we check for required fields, number-only fields, email addresses, etc. If the idea doesn’t excite you then you might as well use happy.js, html5validate or the jQuery Validation plugin.

In the example below we simply check whether the attributes name and age have values on it and return an error if either of them doesn’t have a value. Remember that when you return a value from the validate method it should always be the error that you’re returning. In other words this is not the place where you check for things that have passed the validation.

validate : function(attributes){
	if( == '' || attributes.age == ''){
		return + " "  + attributes.age;

Lastly instantiate the people model.

var p = new people();



Next is the code for saving values into the people model. Begin with delegating the click event into the save button.



Inside the event get the name and age inputted by the user.

var name 	= $.trim($('#name').val());
var age  = $.trim($('#age').val());

Also get the current names and ages that are on the people model.

var cur_names 	= p.get('names'); //array of names
var cur_ages	= p.get('ages'); //array of ages

Then simply set the name and the age. This saves the value of name and age inputted by the user into the name and age attributes in the people model.

var check = p.set({'name': name, 'age': age});

The set method returns a value of false if the value is not saved into the attribute that you have specified and it returns an object when its successfully saved on the attribute that you’re referring to:


If check is a truthy value then the code inside of it will be executed if not then issue an alert to the user that all fields are required. I recommend that you read this article by James Padolsey on truthy and falsey values if you don’t have an idea on what truthy and falsey values are.

if(check){ }else{

alert(‘all fields are required!’);

$('#name, #age').val('');


If both the name and the age is inputted by the user we perform the following code.

First push the name and age inputted by the user into the current names and ages. Push() is a built-in method in JavaScript that allows us to push a single item at the end of the array.


Set the value of the names attribute to be equal to the current names. Do the same with the ages attribute.

p.set('names', cur_names);
p.set('ages', cur_ages);

Of course you can also do it this way if you’re in a hurry:

p.set({'names' : cur_names, 'ages' : cur_ages});

Lastly, clear the textboxes:

$('#name, #age').val('');



Next we build the table where were going to append the names and ages of the people that were adding.

First select the body.

var body = document.getElementsByTagName('body')[0];

//select the body tag

You can easily do this in jQuery through something like this:

var body = $('body');

But I’m currently practicing my plain js skills so please bear with me if you see some good old JavaScript in the examples.

Check if the there is no table in the page yet.

if($('table').length == 0){ //create the table }else{

//get the tbody


Inside it we create the table headers and table body. (If you have keen eyes you might have noticed that I’ve pretty much forgotten about the thead but it’s not actually required so we’ll be fine)

var tbl = document.createElement('table'); tbl.setAttribute('border' , '1'); //set borders to 1 var tr = document.createElement('tr'); //table row for headers var th_1 = document.createElement('th'); //header for names var th_2 = document.createElement('th'); //header for ages th_1.innerHTML = 'Name'; //header text for header names th_2.innerHTML = 'Age'; //header text for header ages

//append the headers into the table row

tr.appendChild(th_1); tr.appendChild(th_2);

tbl.appendChild(tr); //append the table row into the table var tbody = document.createElement('tbody'); //tbody

If the table is already created we simply select the table and the tbody:

	var tbl =document.getElementsByTagName('table')[0];
	var tbody= document.getElementsByTagName('tbody')[0];

And here’s the code that’s we will be executing everytime a new valid person(with both name and age) is created by the user.

var tr_2 = document.createElement('tr'); //create new table row

var td_1 = document.createElement('td'); //create table definition var td_2 = document.createElement('td'); //set table definition text td_1.innerHTML = name; td_2.innerHTML = age;

//append the table definition into the table row


tr_2.appendChild(td_1); tr_2.appendChild(td_2); tbody.appendChild(tr_2); //append the table row into the tbody tbl.appendChild(tbody); //append the tbody into the table body.appendChild(tbl);



Yeah! I guess that’ pretty much all we have to talk about. Be sure to check out the resources I mentioned below if you want to learn more about Backbone.js since I won’t be mentioning it again on the next parts of this series. In this tutorial we’ve created a very simple application using underscore.js, backbone.js and jQuery. As I have said earlier were going to make this application more awesome as we go through the series.



Playing with Underscore.js

In this tutorial I’m going to introduce to you a JavaScript Library called Underscore.js. It’s a library used to make your life easier as a Javascript developer. It has a bunch of different functions used for grouping, sorting, and mapping objects.

I’m learning underscore.js as I’m writing this so if you don’t understand something just Google it and enlightenment will be yours.

I recommend that you play with underscore.js on the console, it’s the best place to introduce yourself to a JavaScript library since you will immediately see the output of what you’re writing.



This returns the items in an array which exists on the first argument but does not exist on the second argument. Which means that its return value depends upon the order of the arguments.

var ar1 = [1, 2, 3, 4, 5, 6];
var ar2 = [2, 3, 7, 9, 10, 1];

_.difference(ar1, ar2); //returns [7, 9, 10]

This can also work with arrays composed of strings:

var amp1 = {'names' : ['wern', 'paul', 'falk']};
var amp2 = {'names' : ['w', 'fa', 'wern']};

_.difference(amp2.names, amp1.names); //returns ["w", "fa"]



The uniq method removes all the duplicates in an object. I don’t know how many arguments it could take but I managed to get two in the example below:

var names1 = ['paul', 'joseph', 'mark', 'matthew']; var names2 = ['joshua', 'ahab', 'michael', 'mark', 'paul']; _.uniq(names1, names2); //returns: ["paul", "joseph",

"mark", "matthew"]



This is one of my favorites. What his does is to check if all the items in an object meets the criteria that you specify. In the example below we are checking if all the items in the array ar1 is a number:

var ar1 = [1, 2, 3, 4, 5, 6]; _.all(ar1, function(value){ return typeof value == 'number'; });

//returns true

However if we try to put a string and a boolean:

var ar1 = [1, 2, 3, 'im a string', 4, 5, true, 6];

_.all(ar1, function(value){ return typeof value == 'number'; });     //returns false

One possible use case for this method is input validations.



I’m not particularly where can I use this one but it looks pretty cool. What this does is to map values to the items in the object that you specify.

var ar1 = [1, 2, 3, 'im a string', 4, 5, true, 6];, function(val){ return val + " awesome"; })

And so the output depends on what you specified in the function body. The code above appends the word awesome to every item in the object ar1.



This works just like the select query in SQL if ever you have worked with databases before. This requires 2 arguments the first one is the object that you want to use as your data source and the second argument is the function which is equivalent to the actual query in SQL. What I did below is to select all the items in the array ar2 that is greater than 1.

var ar2 = [2, 3, 7, 9, 10, 1];, function(val){ return val > 1; })

//returns [2, 3, 7, 9, 10]



This allows you to sort the items in your object any way you want. In the example below I sorted the array ar2 randomly.

var ar2 = [2, 3, 7, 9, 10, 1]; _.sortBy(ar2, function(val){ return Math.random(val); });

//returns items in ar2 in a random order



Returns all items in the object except the first one.

var x = [1,2,3,4];; //returns [2, 3, 4] 



Returns all items in the  object except the last one.

var x = [1,2,3,4];

_.initial(x); //returns [1, 2, 3]



Returns the first item in the object that matches the criteria that you specified.

var x = [1,2,3,4];

_.find(x, function(v){ return v > 3; }); //returns 4



Similar to select, I don’t really know the difference.

var x = [1,2,3,4];

_.filter(x, function(v){ return v > 2;}); //returns [3, 4]



Plucks out the values associated with the key that you specify.

var anime = [{title: 'death note', main_char: 'light yagami'},   {title: 'pokemon', main_char : 'ash'}, {title: 'd-grayman' , main_char : 'allen walker'}]; _.pluck(anime, 'main_char');

//returns [light yagami, ash, allen walker]



Returns the items in an object in a random order.

var x = [1, 2, 3, 4];



As the name suggests, this merges all the items in the objects that you specify as the argument. Duplicates are removed in the process which means that only unique items are returned by the method.

var x = [1, 2, 3, 4];
var y = [4, 88 , 9, 20];
var z = [5, 5, 7, 22, 1, 2];

_.union(x, y, z);  //returns [1, 2, 3, 4, 88, 9, 20, 5, 7, 22]



Returns all the items which exists on all of the objects that you specify.

var x = [1, 2, 3, 4];
var y = [4, 88, 2, 1, 9, 20];
var z = [5, 5, 7, 22, 1, 2];

_.intersection(x, y, z); //returns [1, 2]



Returns an array of numbers that are within the range that you specify. The usage of the arguments depends on the number of arguments that you specify. If you only specify a single argument it is assumed that the initial value will be 0 and the step will be 1. Remember that the array that is returned is always zero-indexed.

_.range(4); //returns [0, 1, 2, 3]

If you specified 2 arguments then it is assumed that the step is 1 and the first argument is the initial value and the second argument is the terminal value.

_.range(2, 10); //returns [2, 3, 4, 5, 6, 7, 8, 9]

If you specified 3 arguments the first argument is the initial value, the second argument is the terminal value, and the third argument is the step. You can make use of this to easily create a multiplication table of any number.

_.range(2, 20, 2); //returns [2, 4, 6, 8, 10, 12, 14, 16, 18]



Binds functions into specific events in an object(elements). It’s like event-delegation in jQuery.

Since were doing things in the console and in an empty page, we first need to create the elements that we will be working on.

var spark = document.createElement('input'); //creates an input element
spark.setAttribute('type', 'button'); //set type to button
spark.setAttribute('value', 'spark'); //set value to spark
spark.setAttribute('id', 'spark'); //set id to spark

var body = document.getElementsByTagName('body')[0]; //select the html body tag
body.appendChild(spark); //inject the button into the dom

After creating the element and injecting it into the DOM we set the properties.

var spark_props = {
   name : 'spark boom',
   onClick : function(){ alert('name is:  ' +; }

Remember that you can add any property any time you want.

spark_props.boom = 'kapow'

Or even modify existing ones. = 'bam!!!'

Call the bindAll() method to bind all the properties together.


Finally, bind the click event to the button using the onEvent method as its action.

$('#spark').bind('click', spark_props.onClick)



Creates a clone of the function which can only be called once. One use case that I could think of is when submitting forms sometimes users tend to click on the Submit button multiple times.

var save = _.once(function_to_send_data_to_server);



Pretty much like the .each() method in jQuery if you’ve ever used jQuery before. It is used to iterate through the items of the object that you specify.

_.each(['re','mi','fa'], function(va){



Returns an array of functions stored in the object that you specified. The example below returns all the functions associated with Backbone.js, the number of functions returned only shows how lightweight it is.

_.functions(Backbone); returns

["Collection", "History", "Model", "Router",

"View", "noConflict", "setDomLibrary", "sync", "wrapError"]



Takes up two arguments the first one is the number of times you want to execute the given function which is the second argument. You can pretty much use this like the _.each method.

var anime = [{title: 'death note', main_char: 'light yagami'},  

{title: 'pokemon', main_char : 'ash'},

{title: 'd-grayman' , main_char : 'allen walker'}];






light yagami


allen walker



Reminds me of the getters and setters _.result is pretty much like the getter method in every programming language but this time you can either get the value for a particular key or execute a particular function.



That’s it! You’ve learned how to use some of the useful methods in underscore.js that you can use in your projects. If you’re already using jQuery you can use underscore.js as an enhancement since they will work together just fine.



Twitter accounts every web developer should follow

Twitter is not just for following celebrities and sharing what’s on your mind. There are some very good use cases for Twitter and one of that is for following awesome people on the field of your interest. In this post I’m going to share a list of the people and entities that you should follow on twitter as a web developer.


Jeffrey Way

The editor of the popular web development blog Nettuts+. I wouldn’t give links to where you can find this awesome guy because everything is already in his site. That includes his youtube account, twitter, google plus, interviews, books, and tutorials.


Kevin Liew

Curator of queness web design and development blog.


Chris Coyier

Curator of css-tricks and host on Shoptalkshow a podcast on front end web design, development and UX.


Peter Cooper

The awesome guy behind JavaScript Weekly, HTML5 Weekly, Ruby Weekly, and Dart Weekly. Very very useful I hope he continues what he’s doing for free.


Rebecca Murphey

She has written a book on the fundamentals of jQuery. You can also follow her on GitHub or read her blog. And yes, yayQuery.


David Walsh

MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover. He usually post about HTML5, CSS3, and JavaScript. You can also read his blog.


Paul Andrew

The curator of Speckyboy Web Design blog. Most of his post are link to articles from the blog but he also post links to useful articles on web design.


Elijah Manor

Well-known on twitter for his awesome link sharing abilities. He posts very useful links on JavaScript, HTML5, CoffeeScript, ASP.Net and jQuery.


Echo JS

A social news site dedicated to JavaScript and related topics. You will mostly see JavaScript projects hosted on Github, Node.js, WebGL, HTML5, and links to some useful articles on JavaScript. Very useful if you’re into front-end web development.


Paul Irish

Not really very active on twitter but he usually post some useful updates or some talks on twitter. I suggest that you follow him on Github if you want to see some of the projects that he’s involved with.


JS Daily

JavaScript awesomeness delivered straight to your twitter feed daily.


Christian Heilmann

A perfect example of an account which doesn’t concentrate on only one stuff. His twitter can be compared to his diary. He occasionally post some awesome stuff on HTML5, JavaScript Performance. So if you only want useful stuff just go to his blog or visit


Kendo UI

Kendo UI is a HTML5, jQuery-based framework for building modern HTML apps. But they also have a blog and a twitter account which makes it very interesting since they’re not only blogging about their product but also some useful JavaScript stuff. And while you’re at it why not try their framework, I assure that you would say that it’s awesome.


.Net Magazine

No this isn’t actually about Microsoft .Net magazine is the world’s best-selling magazine for web designers and developers not the framework from Microsoft.


Badass JavaScript

Occasional JavaScript goodness. You can also check out their blog.


Smashing Magazine

If I had to choose just one twitter account this is the one that I would follow. It’s almost like they have access to every awesome web development stuff on the internet and they post it on their twitter. In case you don’t know Smashing Magazine is actually a web development and design blog founded on 2006 they also have written a ton of books. I can’t imagine how much they’ve done for the web development community, just their blog alone contains an enormous amount of useful stuff.


Alessandro Maruccia

Regularly posts links on jQuery, JavaScript, responsive design. I also found some PHP, HTML5, and css stuff on his feed. Very useful.


John Resig

The creator of jQuery. He’s not really very active on twitter but you can follow him on GitHub if you want to see some action.


Remy Sharp

He’s claiming that he invented sleep patterns, I believe him because he’s awesome.  Yes you can follow him on twitter but you can find useful stuff on his personal blog and a collaboration blog that he created with Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson and Tom Leadbetter.



Knowing what the leaders in the web development industry are up to is very important. It will give you an idea on what you will be doing 2 or 5 years from now and some of the resources that they shared. If you know of any other people that web developers should follow don’t hesitate to share them on the comments.

Email Newsletters every web developer should subscribe to

Web developers all need to keep up with what’s latest in their field. And email newsletters is one way to keep up with the latest news and technologies in the field of web design and development. Here are some of the email newsletters that you should subscribe to.


JavaScript Weekly

First on the list is JavaScript Weekly. A free, once-weekly email round-up of JavaScript news and articles. Most of the stuff that they’re linking to are cool and awesome. You can checkout their archive and see for yourself.



HTML5 Weekly

This weekly newsletter is also from the same guy that brought us JavaScript Weekly, Peter Cooper. As the name suggests HTML5 Weekly is a newsletter linking to the latest news, articles, and other cool and new stuff on html5.



Ruby Weekly

Yep, if you still haven’t notice stuff from Cooper Press is dominating this post. For all the Rubyist out there this is one newsletter you shouldn’t miss. Keeping up with the latest awesome stuff in Ruby has never been much easier.



Dart Weekly

If you want to keep up with Google’s new Dart Programming Language, essentially designed to replace JavaScript? Then subscribing to this newsletter is the perfect way to do so.



Coder Weekly

This newsletter is not specifically intended for Web Developers and Designers. As the name suggests, this newsletter is for programmers. The stuff that they link to are not necessarily the latest and greatest stuff in programming, they mostly link to programming articles.



JS Mag Blog

Yup I just said in the title that this article is supposed to be newsletters only. But what is a blog doing here? Well its awesome JavaScript stuff so I decided to include it. Plus its also a weekly round-up, its like a newsletter without the email.




Status Code is a language agnostic roundup of the latest ideas, releases, trends, events and must-read articles from the field of software development.



Web Design Weekly

Web Design Weekly is essentially a mix of HTML5 Weekly and JavaScript Weekly. It mostly links to CSS3, HTML5, and JavaScript stuff. And yes, they also have an archive where you can check out some of the cool stuff that were posted before you subscribed.



Laura Carlson Web Development Newsletter

This newsletter has been running for a while now, I know because it has also been linked to on a 3-year old Smashing Magazine article. Its old but it never fails to link to some of the latest news and articles in Web Development.


SitePoint Newsletter

This is actually a collection of newsletters from the SitePoint websites. They mostly link to CSS3, HTML5, and PHP stuff.



Daily JS

If you’re the kind of guy who wants to keep up with some JavaScript news daily then you should subscribe to the Daily JS Newsletter. They mostly link to awesome JavaScript projects on GitHub.



JavaScript Monkey

A new kid on the block at the time of writing of this article. Only a few weeks old basing from their available archives of JavaScript awesomeness.




That’s it! Subscribing to newsletters is one of the good ways you can keep up with the latest in the Web Development and Web Design Industry.
If you know of some cool newsletters that wasn’t mentioned on this article then please share them on the comments.