Ember.js構(gòu)建基于jQuery Mobile的PhoneGap項目

1、ember.js構(gòu)建基于jquery mobile的phonegap項目隨著html 5的興起，基于此的項目也越來越的多，因而浮現(xiàn)了無數(shù)mvc框架，如：backbone.js、ember.js、angular.js等，此系列將闡述這些框架在代碼層面的區(qū)分，希翼可以給初學(xué)者一些思路。本文將介紹ember.js構(gòu)建基于jquery mobile的phonegap項目（hybird app）。功能介紹用法ember.js + jquery mobile + phonegap構(gòu)建一個hybird app項目，命名為adobe reader，具有如下功能： 讀取 將xml的內(nèi)容以列表的形式展示出來。 點

2、擊隨意列表項目（item），可以跳轉(zhuǎn)到相應(yīng)地址。 項目依靠 jquery（1.8.2版） 下載地址： 替代javascript語法。 jquery mobile（1.2.0 final版） 下載地址： 實現(xiàn)ui構(gòu)建。 ember.js（版） 下載地址： 實現(xiàn)mvc架構(gòu)。 ember-bridge-jqm（0.1） 下載地址： ember.js無法挺直與jquery mobile搭配，所以需要ember-bridge-jqm來代理。 代碼基于 xml2json 下載地址：請看范例文件 xml轉(zhuǎn)json的jquery插件。 phonegap（2.0.0 版） 下載地址： 打包app時

3、需要。 范例文件 附件 通過本文將學(xué)會 理解ember.js的mvc結(jié)構(gòu)特點。 把握ember.js與jquery mobile的特別寫法（ember-bridge-jqm的運用） 把握ember.js的特色功能：ui binding。 項目截圖工程結(jié)構(gòu) common：共同的js類庫，如jquery、jquery plugin等。 ember：ember.js相關(guān)類庫。 javascripts：ember.js對應(yīng)mvc結(jié)構(gòu)的javascript代碼。 jqm：jquery mobile相關(guān)類庫。 phonegap：phonegap相關(guān)類庫。 stylesheets：css文件。 項目架構(gòu)代碼

4、分析下面將展示adobe reader的關(guān)鍵代碼，并分離介紹ember.js中m（model）v（view）c（controller）代碼特點、ui binding的實現(xiàn)等功能。application（應(yīng)用程序入口）app = em.application.create();與全部的ember.js app都是一樣，首先要建立一個application。views（視圖）app.pageview = mov.pageview.extend();上面的代碼與通常的ember.js app在view（視圖）層的繼承不太一樣，主要區(qū)分在于所有的view（視圖）都繼承自mov，那么mov是什么？mov

5、定義在ember-bridge-jqm中，可以在assetswwwemberember-bridge-jqm.js中找到。為什么ember.js不能挺直與jquery mobile一起用法，而非要一個代理才行？由于ember.js在實現(xiàn)的時候會修改html代碼，因此具有侵入性。盡人皆知jquery mobile也是一個侵入性很強的類庫，例如：它會把 這樣的代碼改為。當這兩種侵入性的類庫放在一起，就會浮現(xiàn)各種未知錯誤，所以才有ember-bridge-jqm.js這樣的代理類庫。通常一個典型的jquery mobile具有如下結(jié)構(gòu)： 加入ember-bridge-jqm.js后，html結(jié)構(gòu)可以

6、挺直用javascript的方式實現(xiàn)：app.pageview = mov.pageview.extend(); app.headerview = mov.headerview.extend(); app.footerview = mov.footerview.extend(); app.contentview = mov.contentview.extend();注：上述代碼分離實現(xiàn)了jquery mobile的 "page" "header" "content" "

7、footer"視圖。以上就是view（視圖）層的關(guān)鍵代碼，主要負責(zé)實現(xiàn)jquery mobile的結(jié)構(gòu)，接下來看一下model（模型）的代碼。model（模型）定義如下數(shù)據(jù)結(jié)構(gòu)（value object）：app.articles = ember.object.extend( title : null, link : null, desc : null, creator : null, date : null );上述結(jié)構(gòu)與rss源的xml節(jié)點保持全都。因為需要處理xml，因此增強一個叫做servicesmodel的函數(shù)，功能是讀取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轉(zhuǎn)化為json對象。 調(diào)用app.json2obj。 再看一下json2obj的實現(xiàn)：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具有如下功能： 循環(huán)遍歷傳入的json

10、對象，并將遍歷后的內(nèi)容保存到vo（app.articles.create()）。 通過pushobject將每個遍歷后的app.articles（vo）保存到target（傳入的參數(shù)）。 注：pushobject是ember.js辦法，與ember.arraycontroller一同用法，將循環(huán)遍歷（each）后的vo（app.articles）保存到（pushobject）arraycontroller的content中。以上就是model（模型）層的關(guān)鍵代碼，主要負責(zé)實現(xiàn)xml的讀取、解析和保存，接下來看一下controller（控制器）的代碼。controller（控制器） app.ge

11、tarticlescontroller = ember.arraycontroller.create( content : , init : function () /call services model app.servicesmodel( this, " ); );getarticlescontroller具有如下功能： 實現(xiàn)ember.js的控制器app.getarticlescontroller = ember.arraycontroller.create(); 調(diào)用model層的servicesmodel，并傳入兩個參數(shù)： this（供用法pushobject辦法

12、） url（傳入解析用的rss地址） 總結(jié)以上就是javascript端mvc各層的關(guān)鍵代碼，代碼的實現(xiàn)與其他框架并無太大的區(qū)分，需要注重的是如何用法ember.js方式實現(xiàn)mvc結(jié)構(gòu)的寫法： model：ember.object.extend(); view：mov.pageview.extend(); controller：ember.arraycontroller.create(); 接下來看一下html端的ember.js寫法，并展示ember.js有別于其他mvc框架的特點：ui binding。html端相關(guān)類庫的引入標簽內(nèi)： 標簽內(nèi)： 注：之所以要把放到標簽中主要基于加快加載速度

13、的考慮。jquery mobile結(jié)構(gòu)的實現(xiàn)（ember-bridge-jqm的運用）在中加入如下代碼： 注：data-template-name的值一定要設(shè)定為"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的值一定根據(jù)上述設(shè)定。在html端加入如下代碼：view app.headerview . /view view app.contentview . /view view app.footerview . /view這些代碼的結(jié)構(gòu)等價于jquery mobile的結(jié)構(gòu)： 注：app.headerview、app.contentview、app.footerview定義在javascripts/app.js中，是模版引擎（handlebars.js）的語法。listview（ui binding）的實現(xiàn)在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設(shè)定為app.getarticlescontroller，因為listview是一個數(shù)組結(jié)構(gòu)（app.getarticlescontroller = ember.arraycontroller.create();）所以用法了關(guān)鍵字collection，而非view。 content.title、content.creator、content.desc來源于app.getarticlescontroller.content，而app.getarticlescontroller.content的值是調(diào)用pushobject而來，通過app.json2obj的代碼可知，conte

17、nt.title、content.creator、content.desc分離存儲了解析xml后的app.articles（value object）值。 注：bindattr href="content.link"并沒有寫成：，是由于ember.js在注入代碼的時候，會生成xxx這樣的結(jié)構(gòu)，所以在設(shè)定href時不能挺直寫 content.link ，而是用法bindattr方式?？偨Y(jié)embe.js通過collection和pushobject以及模版引擎（handlebars.js）來實現(xiàn)。phonegap因為phonegap只起到打包（android app）作用，并沒有用法phonegap的相關(guān)功能，因此無需引入，挺直打包即可，phonegap的過程略去。結(jié)論 ember.js與jquery mobile都是具有侵入性的框架，所以盡量不要放在一起用法，如在一起用法，需要代理方式（ember-bridge-jqm）。 因為ember.js與jquery mobile的不兼容性，所以在編寫jq