当前位置: 首页 > 科技观察

整合jQueryMobile+AngularJs体验

时间:2023-03-19 02:14:45 科技观察

都是不错的JS编程框架,但是用途不同1.jQueryMobile提供了很好的图形空间,并且依赖于jQuery本身,提供了大量的空间操作API2。Angular没有控件,但它是一个很好的JSMVC框架,并提供空间数据绑定功能。于是,一些开源项目开始将两者整合在一起,比如https://github.com/opitzconsulting/jquery-mobile-angular-adapter但是有了这个适配器,两者能不能很好的工作,NO。存在一些问题,比如两个页面的加载方式不一样。对于每个页面,Angular在需要时使用路由将页面片段加载到浏览器。网址类似https://img.ydisp.cn/news/20220914/sswbd3oerkl手机端需要一次性加载所有页面到客户端。这样,如果您在jQueryMobile中为每个页面定义一个Angular控制器,那么当您初始化Angular控制器时,该页面将不会显示。我们需要一个设计实现,为每个jQueryMobilePage定义一个Angularcontroller,每个controller完成对应页面的数据绑定,如何实现1.页面开发使用jQueryMobile,我们为rootbody定义一个rootangularcontroller比如2.导航问题:navigation使用jQueryMobile的$.mobile.changePage而不是angular的route,因为页面是使用jQueryMobile编写的。页面导航除了切换页面外,最重要的一点就是初始化页面数据,而由于在jQueryMobile下,所有的控制器都是在页面加载阶段初始化的,所以只能在导航定义时在根控制器中刷新显示页面绑定数据,需要在根控制器中定义所有页面的绑定数据。根据angular的规则,所有的子控制器都会继承这些数据定义。定义的时候最好使用structure而不是primarytype,这样可以直接使用controller,比如定义一个shop数据结构$scope.shop={};$scope.shop.catelogs=null;$scope.shop.advices=[];$scope.shop.child=[];$scope.shop.products=[];3.我经常定义一个单独的控制器,用它来初始化页面控制器,比如angular.module('ngPageNav',[],['$provide',function($provide){$provide.factory('ngPageNavigator',['$http',function($http){functionnav($scope,$http,action,data,ignoreStack){.....}return{nav:nav,back: back};}}]);}]).value('名称','ngPageNav');3.当你调用$.mobile.changePage时,页面绑定数据经常发生变化,但是页面不会刷新page页面,最简单的处理方式就是向后台发送一个dummyrequest。4.如果打开jQueryMobile需要直接切换到某个页面,请在根控制器中监听jqmInit$scope.$on("jqmInit",function(){}原文链接:https://img.ydisp.cn/news/20220914/t3idzg53nnk