June 2013

Backbone.js View DOM Events – Complete List

I have been working on a few different Backbone projects recently, and recently ran into a problem of binding a DOM event to a couple input radio buttons I was using as a toggle switch. For some reason, the standard click event was not binding to the correct elements when it came to these radio buttons.

After a few searches on Google and StackOverflow, I could not successfully find a complete list of all the DOM events that are allowed to be passed into the “events” hash inside a Backbone.js view. The Backbone.js documentation tells you how to use the delegateEvents method, but it does not give a complete list of all events.

It turns out that all jQuery events are valid events that can be used inside the “events” hash in a view. This makes total sense, but I had not seen this listed anywhere, until I found a short post on StackOverflow.

Here is the complete list of all jQuery events you can listen to in a Backbone.js view:

More information on the Backbone View delegateEvents method and events hash:

I ended up using the “change” event combined with an if / else if statement to get the functionality I was looking for with this toggle switch. Here is a snippet of my toggle switch event listener code:

  //Backbone View delegateEvents hash
  events: {
    'change .toggle-switch .switch': function(e) {
      if ($('#live-game').is(':checked')){
        console.log('live game');
      } else if ($('#completed-game').is(':checked')) {
        console.log('completed game');

I used a great CSS library called css-toggle-switch for these toggle switches. It comes with a few well styled themes, and it works great with the Backbone code above. Check it out if you’re looking for a mobile-style toggle switch that is pure CSS.

I am currently in the final phases of my latest personal project here at Hack Reactor. It is a cloud-based poker session tracking app, with a mobile first design. I am using Backbone.js, Node.js, Express, Parse.com, and D3 in my stack. Look for a blog post soon with a link to the live deployment of this app!

Read more

Hack Reactor Students Make Front Page of Wired.com

Today, Wired magazine’s featured article on their website front page tells the story of a group of Hack Reactor students in the March 2013 cohort!

Check out the article on Wired: Hackers Spawn Web Supercomputer on Way to Chess World Record


The N-Queens team (left to right): Tim, Shawn, CJ, Ruan, John, Cameron, Nathan. Photo courtesy Hack Reactor.


This group of Tim Sze, Ruan Pethiyagoda, John S. Dvorak, is in the Hack Reactor class above mine. They have been working on a group project called Smidge (formerly SuperComputerJS), that is attempting to break the world record for the N-Queens problem I wrote about last month.

This trio of students, along with a few of our instructors at Hack Reactor, will end up breaking the world record of N-26 for this N-Queens problem. I was able to talk to Ruan for quite a while about his approach to this algorithm, which ultimately helped me develop an optimized version of my original solution.

The group’s work is truly impressive, and press coverage of what we’re doing at Hack Reactor will help out all students in our future job searches. Keep up the good work guys!

Read more