Ember.js构建基于jQuery Mobile的PhoneGap项目

1、ember.js构建基于jquery mobile的phonegap项目随着html 5的兴起，基于此的项目也越来越的多，因而浮现了无数mvc框架，如：backbone.js、ember.js、angular.js等，此系列将阐述这些框架在代码层面的区分，希翼可以给初学者一些思路。本文将介绍ember.js构建基于jquery mobile的phonegap项目（hybird app）。功能介绍用法ember.js + jquery mobile + phonegap构建一个hybird app项目，命名为adobe reader，具有如下功能： 读取 将xml的内容以列表的形式展示出来。 点

2、击随意列表项目（item），可以跳转到相应地址。 项目依靠 jquery（1.8.2版） 下载地址： 替代javascript语法。 jquery mobile（1.2.0 final版） 下载地址： 实现ui构建。 ember.js（版） 下载地址： 实现mvc架构。 ember-bridge-jqm（0.1） 下载地址： ember.js无法挺直与jquery mobile搭配，所以需要ember-bridge-jqm来代理。 代码基于 xml2json 下载地址：请看范例文件 xml转json的jquery插件。 phonegap（2.0.0 版） 下载地址： 打包app时

3、需要。 范例文件 附件 通过本文将学会 理解ember.js的mvc结构特点。 把握ember.js与jquery mobile的特别写法（ember-bridge-jqm的运用） 把握ember.js的特色功能：ui binding。 项目截图工程结构 common：共同的js类库，如jquery、jquery plugin等。 ember：ember.js相关类库。 javascripts：ember.js对应mvc结构的javascript代码。 jqm：jquery mobile相关类库。 phonegap：phonegap相关类库。 stylesheets：css文件。 项目架构代码

4、分析下面将展示adobe reader的关键代码，并分离介绍ember.js中m（model）v（view）c（controller）代码特点、ui binding的实现等功能。application（应用程序入口）app = em.application.create();与全部的ember.js app都是一样，首先要建立一个application。views（视图）app.pageview = mov.pageview.extend();上面的代码与通常的ember.js app在view（视图）层的继承不太一样，主要区分在于所有的view（视图）都继承自mov，那么mov是什么？mov

5、定义在ember-bridge-jqm中，可以在assetswwwemberember-bridge-jqm.js中找到。为什么ember.js不能挺直与jquery mobile一起用法，而非要一个代理才行？由于ember.js在实现的时候会修改html代码，因此具有侵入性。尽人皆知jquery mobile也是一个侵入性很强的类库，例如：它会把 这样的代码改为。当这两种侵入性的类库放在一起，就会浮现各种未知错误，所以才有ember-bridge-jqm.js这样的代理类库。通常一个典型的jquery mobile具有如下结构： 加入ember-bridge-jqm.js后，html结构可以

6、挺直用javascript的方式实现：app.pageview = mov.pageview.extend(); app.headerview = mov.headerview.extend(); app.footerview = mov.footerview.extend(); app.contentview = mov.contentview.extend();注：上述代码分离实现了jquery mobile的 "page" "header" "content" "

7、footer"视图。以上就是view（视图）层的关键代码，主要负责实现jquery mobile的结构，接下来看一下model（模型）的代码。model（模型）定义如下数据结构（value object）：app.articles = ember.object.extend( title : null, link : null, desc : null, creator : null, date : null );上述结构与rss源的xml节点保持全都。因为需要处理xml，因此增强一个叫做servicesmodel的函数，功能是读取xml，代码如下：app.servicesm

8、odel = function( target, url ) $.ajax( type : "get", url : url, success: function( xml ) /get json var json = $.xml2json( xml ); /call json2obj app.json2obj( target, json.item ); ); servicesmodel具有如下功能： 用法ajax方式读取rss源。 将读取的xml转化为json对象。 调用app.json2obj。 再看一下json2obj的实现：app.json2obj

9、= function( target, tmp ) target.set( 'content', ); $( tmp ).each( function( index, value ) var tmp = app.articles.create( title : value.title, link : value.link, desc : value.description, creator : value.creator, date : value.date, ); target.pushobject( tmp ); ); json2obj具有如下功能： 循环遍历传入的json

10、对象，并将遍历后的内容保存到vo（app.articles.create()）。 通过pushobject将每个遍历后的app.articles（vo）保存到target（传入的参数）。 注：pushobject是ember.js办法，与ember.arraycontroller一同用法，将循环遍历（each）后的vo（app.articles）保存到（pushobject）arraycontroller的content中。以上就是model（模型）层的关键代码，主要负责实现xml的读取、解析和保存，接下来看一下controller（控制器）的代码。controller（控制器） app.ge

11、tarticlescontroller = ember.arraycontroller.create( content : , init : function () /call services model app.servicesmodel( this, " ); );getarticlescontroller具有如下功能： 实现ember.js的控制器app.getarticlescontroller = ember.arraycontroller.create(); 调用model层的servicesmodel，并传入两个参数： this（供用法pushobject办法

12、） url（传入解析用的rss地址） 总结以上就是javascript端mvc各层的关键代码，代码的实现与其他框架并无太大的区分，需要注重的是如何用法ember.js方式实现mvc结构的写法： model：ember.object.extend(); view：mov.pageview.extend(); controller：ember.arraycontroller.create(); 接下来看一下html端的ember.js写法，并展示ember.js有别于其他mvc框架的特点：ui binding。html端相关类库的引入标签内： 标签内： 注：之所以要把放到标签中主要基于加快加载速度

13、的考虑。jquery mobile结构的实现（ember-bridge-jqm的运用）在中加入如下代码： 注：data-template-name的值一定要设定为"main"在javascripts/app.js的view（视图）层中加入如下代码：app.pageview = mov.pageview.extend( templatename:'main', id: 'page-view', didinsertelement: function() $.mobile.changepage(this.$(); );注：app.p

14、ageview.templatename和id的值一定根据上述设定。在html端加入如下代码：view app.headerview . /view view app.contentview . /view view app.footerview . /view这些代码的结构等价于jquery mobile的结构： 注：app.headerview、app.contentview、app.footerview定义在javascripts/app.js中，是模版引擎（handlebars.js）的语法。listview（ui binding）的实现在javascripts/app.js新增一个v

15、iew（视图）层，命名为listview：app.listview = mov.listview.extend();在html端加入如下代码：（重点）view app.contentview collection app.listview contentbinding="app.getarticlescontroller" content.title via content.creator content.desc /collection /view 具有如下功能： 定义了一个contentview，并在其中加入listview。 listview的cont

16、entbinding设定为app.getarticlescontroller，因为listview是一个数组结构（app.getarticlescontroller = ember.arraycontroller.create();）所以用法了关键字collection，而非view。 content.title、content.creator、content.desc来源于app.getarticlescontroller.content，而app.getarticlescontroller.content的值是调用pushobject而来，通过app.json2obj的代码可知，conte

17、nt.title、content.creator、content.desc分离存储了解析xml后的app.articles（value object）值。 注：bindattr href="content.link"并没有写成：，是由于ember.js在注入代码的时候，会生成xxx这样的结构，所以在设定href时不能挺直写 content.link ，而是用法bindattr方式。总结embe.js通过collection和pushobject以及模版引擎（handlebars.js）来实现。phonegap因为phonegap只起到打包（android app）作用，并没有用法phonegap的相关功能，因此无需引入，挺直打包即可，phonegap的过程略去。结论 ember.js与jquery mobile都是具有侵入性的框架，所以尽量不要放在一起用法，如在一起用法，需要代理方式（ember-bridge-jqm）。 因为ember.js与jquery mobile的不兼容性，所以在编写jq