How can I use Google's/MBP FastButton code with backbone events

Question

Buttons are slow on mobiles (at least 300ms delay in most browsers due to drag detection among other things). Google wrote some javascript to fix this: http://code.google.com/mobile/articles/fast_buttons.html

The Mobile HTML5 Boilerplate people integrated this into their package: https://github.com/h5bp/mobile-boilerplate/blob/master/js/mylibs/helper.js#L86

I want to figure out how I can easily use this with backbone. Something like:

events: {
  "fastbutton button.save": "save"
}

Where fastbutton replaces click or mousedown with the fast button code. I expect that I will need to rewrite the MPB.fastbutton code a bit. Has anybody done this?

Vanillic

Answer 1

Instead of creating 'fastbuttons' everywhere, it's probably saner to use a library like FastClick that will transparently convert touches to click events on the touched element and get rid of that 300ms delay.

It's as easy as new FastClick(document.body) and you're ready to go.

The advantage of that approach is that if or when the behaviour of touch events changes on mobile devices so that there's no delay on elements with a click event registered, you can just change one line of code to drop the library instead of changing all your code to convert 'fastbuttons' to regular buttons. Maintainability is always good.

Maunsell

I haven't tested it yet but this sounds like exactly what I (still) need. – Vanillic

Just tested it on my sandbox backbone app - works exactly as described. Is there a possible scalability problem with instantiating the FastClick object on the entire document.body? The documentation only includes examples of instantiating the class on specific elements. – Caylacaylor

The FT web app uses FastClick instantiated on document.body and there haven't been any issues. Perhaps I should update the examples to make it clear that the usual practice is to instantiate on the body. – Maunsell

Answer 2

I'm pretty sure, this won't work the way you'd like it to. Instead of having an additional event, like say "fastclick", you have to define an element as beeing a fastButton. You actually have to create an instance of fastbutton on which you pass the element and the code like this:

new MBP.fastButton($("button.save"), function() { this.save(); }.bind(this));

In case of backbone, you can easily do this in the initialize() function instead of the events object.

// sorry, just read that you are not really looking for this :)

Jihad