2012-01-23 18 views
6

Me pregunto si alguien está utilizando la última jQTouch con Backbone.js y si es así cómo están manejando la transición entre páginas usando enrutadores y vistas de Backbone en lugar de jQTouch automáticamente tratando de mostrar un div con la identificación específica relacionada con el hash.jQTouch y Backbone.js Enrutamiento/Vistas

+0

Ha considerado usar Sencha Touch, parece ser lo que está construyendo hacia este punto. – Prospero

Respuesta

7

¿Qué estás tratando de lograr con jQTouch? AFAIK, es un marco móvil liviano que le permite construir una aplicación web móvil de una sola página mostrando y ocultando divs. Las tres cosas principales que le ofrece:

  1. Niza elementos de interfaz de usuario móvil
  2. transiciones CSS3 entre páginas (diapositivas, pop, desvanecimiento, etc.).
  3. un marco de navegación, que pasa automáticamente entre las páginas basadas en el elemento de la interfaz de usuario se toca (por ejemplo, tocar un ancla con href #about hará la transición automática de la página actual a la página (div) con ID about)

I supongo que le gustaría mantener 1) y 2) para facilitar su vida como desarrollador, y BackBone para manejar 3) - esto tiene sentido para mí ya que la estructura MVC de BackBone y la propagación de eventos entre vistas es agradable. Si este es el caso, realmente 1) y 2) son solo trucos de CSS. Así que guarde jqtouch.css y zanja jqtouch.js. De esta forma, obtendrá todo el estilo agradable y podrá realizar transiciones de forma programática en sus vistas BackBone, sin que jqTouch interfiera en el manejo de la navegación.

Si hace esto, recuerde envolver toda su aplicación en <div id="jqt"></div> para que la hoja de estilos encuentre y estilice todos los elementos y botones de su lista. Cuando se desea utilizar una transición, usar jQuery/Zepto añadir CSS correcto a cada página:

$("#toPage").addClass('slideleft in current'); 
$("#fromPage").addClass('slideleft out'); 

Esto hará que las transiciones CSS3 especificados en jqtouch.css. La lista de transiciones disponibles se puede encontrar en jqtouch.js, línea 61 en adelante. Simplemente cambie slideleft en el código anterior por un nombre de animación diferente para lograr una transición diferente.

Descargo de responsabilidad! En realidad, no lo he intentado, solo una teoría y podría no funcionar ... aunque estoy tratando de lograr exactamente esto, use un buen tema de interfaz de usuario móvil con BackBone, y esto es lo más cercano que puedo encontrar. Cuando tenga la oportunidad, intentaré codificar esto en los próximos días. Si llegas primero y lo intentas, por favor, ¡dime cómo te va!

+0

No he tenido tiempo de probar tu idea, pero es muy interesante. –