跨平台腾挪开发实战（六）-Jquery mobile的动态化

跨平台移动开发实战（六）------Jquery mobile的动态化

由于页面的控制和展现都放在了mobile客户端，所以UI的动态化就需要通过JS在客户端完成。针对JQM的动态化，主要用到以下两个技术：

1）JQM组件动态修改

常常需要动态修改JQM某些组件的显示，由于它有独立与JQuery的自制组件渲染机制，所以修改DOM后需要额外的措施才能refresh界面显示，JQM这块做得不太友好，每个组件的方式不一样：

$.mobile.changePage( "#msgLocalListPage", { transition: "flip"} );$("#crNewToList").html("<li id='crNewToListTitle' data-role='list-divider' role='heading'>CR New to me List</li>");$("#crNewToList").listview("refresh");

2）界面模板化

在客户端也能基于模版技术来动态化页面显示，这里我使用了一个jquery template plugin：https://github.com/jquery/jquery-tmpl/，demo和doc里面都有，我就不多说，这里我想强调的是关于页面刷新，如果需要重复动态显示某一个page，我推荐把整个page都放在模版里，每次动态显示时都create这个page，这样就不要根据不同组件采用不同的界面刷新的方法，三个步骤：

把数据塞进模版里：$( "#crFilterTemplate" ).tmpl( data ).appendTo(document.body);create 一次性page：$("#crFilterPage").attr( "data-" + $.mobile.ns + "external-page", true ).one( 'pagecreate', $.mobile._bindPageRemove );change page：$.mobile.changePage( "#crFilterPage", { transition: "flip"} );