jQTouch and Backbone.js Routing/Views

Question

I am wondering if anyone is using the latest jQTouch with Backbone.js and if so how are they handling transitioning between pages using Backbone's routers and views instead of jQTouch automatically trying to show a div with the specific ID relating to the hash.

Montelongo

Have you considered using Sencha Touch, it seems to be what you are building towards at this point. – Brunk

Answer 1

What are you trying to achieve with jQTouch? AFAIK, it is a lightweight mobile framework which allows you to build a single page mobile web app by showing and hiding divs. The three main things it gives you:

1. Nice mobile UI elements
2. CSS3 transitions between pages (slide, pop, fade, etc).
3. A navigation framework which automatically transitions between pages based on the UI element you touch (e.g. touch an anchor with href #about will auto transition from the current page to the page (div) with ID about)

I presume you'd like to keep 1) and 2) to make your life as a dev easier, and for BackBone to handle 3) - this makes sense to me as BackBone's MVC structure and event propagation between views is nice. If this is the case, really 1) and 2) are just CSS tricks. So keep jqtouch.css and ditch jqtouch.js. That way, you get all the nice styling and can programatically perform transitions in your BackBone views, without jqTouch getting in the way when dealing with navigation.

If you do this, remember to wrap your entire app in <div id="jqt"></div> so the stylesheet finds and styles all your list elements and buttons. When you want to use a transition, use jQuery/Zepto add the correct CSS to each page:

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

This will trigger the CSS3 transitions specified in jqtouch.css. The list of transitions available can be found in jqtouch.js, line 61 onwards. Just change slideleft in the code above for a different animation name to achieve a different transition.

Disclaimer! I haven't actually tried this, only a theory and might not work... although I am trying to achieve exactly this, use a nice mobile UI theme with BackBone, and this is the closest I can find. When I get a chance I will try and code this up over the next few days. If you get there first and attempt it please let me know how you get on!

Lennalennard

I haven't had time to try your idea yet, but it's very interesting. – Devotion