Menu
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.
983
In backbone. js, there are 7 modules HTTP request, Router, View, Events, Model, and Collection. Whenever a user makes a request it is directed to the router and in response to these requests, a user interface is displayed at the user end which is known as Views.
Backbone. Backbone has been around for a long time, but it's still under steady and regular development. It's a good choice if you want a flexible JavaScript framework with a simple model for representing data and getting it into views.
A backbone router is a type of router that links separate systems in different meshes of a network with each other. As its name suggests, a backbone router plays the role of a backbone in any network connection and, as such, is part of the backbone network.
BackboneJS allows developing of applications and the frontend in a much easier way by using JavaScript functions. BackboneJS provides various building blocks such as models, views, events, routers and collections for assembling the client side web applications.
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:
#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!
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
