2011-12-12 5 views
5

Los botones son lentos en los móviles (al menos 300ms de retraso en la mayoría de los navegadores debido a la detección de arrastre, entre otras cosas). Google escribió algunos javascript para solucionar este problema: http://code.google.com/mobile/articles/fast_buttons.html¿Cómo puedo usar el código FastButton de/MBP de Google con eventos troncales?

La gente móvil HTML5 repetitivo integrados esto en su paquete: https://github.com/h5bp/mobile-boilerplate/blob/master/js/mylibs/helper.js#L86

Quiero averiguar cómo puedo utilizar simplemente esto con la columna vertebral. Algo como:

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

Donde fastbutton reemplaza el clic o mousedown con el código del botón rápido. Espero que necesite volver a escribir el código MPB.fastbutton un poco. ¿Alguien ha hecho esto?

Respuesta

8

En lugar de crear '' fastbuttons en todas partes, es probable que sea más sano para usar una biblioteca como FastClick que forma transparente convertirá toques a hacer clic en eventos el elemento tocado y deshacerse de ese retraso de 300 ms.

Tan fácil como new FastClick(document.body) y listo.

La ventaja de este enfoque es que si o cuando el comportamiento de los acontecimientos cambios táctiles en dispositivos móviles de manera que no hay retraso en elementos con un evento de clic registrada, sólo se puede cambiar una línea de código para dejar la biblioteca en lugar de cambiando todo tu código para convertir 'botones rápidos' a botones normales. Mantenibilidad es siempre buena.

+1

No lo he probado todavía, pero esto suena exactamente a lo que necesito (todavía). –

+0

Acabo de probarlo en mi sandbox backbone, funciona exactamente como se describe. ¿Existe un posible problema de escalabilidad al crear instancias del objeto 'FastClick' en el' document.body' completo? La documentación solo incluye ejemplos de creación de instancias de la clase en elementos específicos. –

+1

La aplicación web FT usa FastClick instanciado en 'document.body' y no ha habido ningún problema. Tal vez debería actualizar los ejemplos para dejar en claro que la práctica habitual es crear instancias en el cuerpo. –

1

Estoy bastante seguro de que esto no funcionará como a usted le gustaría. En lugar de tener un evento adicional, como decir "fastclick", debe definir un elemento como un FastButton. De hecho tienes que crear una instancia de fastbutton en la que se pasa el elemento y el código como el siguiente:

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

En el caso de la columna vertebral, puede hacerlo fácilmente en la función initialize() en lugar de los hechos objeto.

// Lo sentimos, acaba de leer que usted no está realmente en busca de esto :)

Cuestiones relacionadas