jQTouch和Backbone.js路由/视图

Question

如果有人使用与Backbone.js的最新jQTouch和我想知道如果这样他们如何使用骨干路由器和意见处理页面之间过渡,而不是jQTouch自动试图显示div与涉及哈希专用ID.

Answer 1

你想用jQTouch实现什么目标？AFAIK,它是一个轻量级的移动框架,允许您通过显示和隐藏div来构建单页移动Web应用程序.它给你的三件主要事情:

1. 漂亮的移动UI元素
2. CSS3在页面之间转换(幻灯片,弹出,淡入淡出等).
3. 基于您触摸的UI元素在页面之间自动转换的导航框架(例如,使用href触摸锚点#about将自动从当前页面转换为带有ID的页面(div)about)

我认为你想保持1)和2)让你的生活变得更容易,并且BackBone可以处理3) - 这对我来说很有意义,因为BackBone的MVC结构和视图之间的事件传播很好.如果是这种情况,真的1)和2)只是CSS技巧.所以保持jqtouch.css和沟渠jqtouch.js.这样,您可以获得所有漂亮的样式,并且可以在BackBone视图中以编程方式执行转换,而不会在处理导航时妨碍jqTouch.

如果这样做,请记住将整个应用程序打包,<div id="jqt"></div>以便样式表找到并设置所有列表元素和按钮的样式.如果要使用转换,请使用jQuery/Zepto为每个页面添加正确的CSS:

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

这将触发指定的CSS3过渡jqtouch.css.可用的转换列表可以在jqtouch.js第61行开头找到.只需更改slideleft上面的代码,即可获得不同的动画名称,以实现不同的过渡.

免责声明!我实际上没有尝试过这个,只是一个理论而且可能无法工作......虽然我想要实现这一点,但是使用BackBone的漂亮的移动UI主题,这是我能找到的最接近的.当我有机会的时候,我会在接下来的几天里尝试编写代码.如果你先到达并试一试,请告诉我你的进展情况!