随着HTML 5的兴起，基于它的项目越来越多，于是出现了很多MVC框架，比如Backbone.js、Ember.js、Angular.js等。本系列将在代码层面解释这些框架的区别，希望能给初学者一些思路。

本文将介绍Ember.js构建一个基于jQuery Mobile的PhoneGap项目(Hybird App)。

功能介绍

使用embed.jsjquery mobile phonegap构建一个名为Adobe Reader的Hybird App项目，该项目具有以下功能：

阅读http://feeds.adobe.com/xml/rss.cfm's数据(可扩展标记语言来源)。

以列表的形式显示XML的内容。

单击任意列表项，跳转到相应的地址。

项目依赖

Jquery(版本1.8.2)

下载地址：http://jquery.com

覆盖JavaScript语法。

JQuery Mobile(1.2.0最终版本)

下载地址：http://www.jquerymobile.com

实现UI构建。

Ember.js(版本0.9.8.1)

下载地址：http://www.emberjs.com/

实现MVC架构。

Ember-bridge-jqm(0.1)

下载地址：https://github.com/kenshin/ember-bridge-jqm

Ember.js不能和jQuery Mobile直接匹配，所以需要ember-bridge-jqm来“代理”。

代码是根据https://github.com/LuisSala/emberjs-jqm和https://github.com/tolbard/ember-moving.修改的

xml2json

下载地址：请看样本文件

从XML到JSON的JQuery插件。

phone gap(2 . 0 . 0版)

下载地址：http://www.phonegap.com

打包应用程序需要。

范例文件

附件

通过本文将学会

了解Ember.js的MVC结构特点.

掌握Ember.js和jQuery Mobile(嵌入式-桥接-jqm的应用)的特殊写法

掌握Ember.js的特色功能：UI绑定。

项目截图

工程结构

常用：一个常用的JS类库，比如jQuery、jQuery Plugin等。

Ember:Ember.js相关类库。

JavaScript:Ember . js对应MVC结构的JavaScript代码。

Jqm:jQuery Mobile相关类库。

Phonegap:PhoneGap相关类库。

样式表：CSS文件。

项目架构

代码分析

下面将展示Adobe Reader的关键代码，并介绍M(Model)V(View)C(Controller)代码的特点以及在Ember.js中UI绑定的实现.

Application（应用程序入口）

App=Em。application . create()；

和所有的embed.jsapp一样，应该首先建立一个应用程序。

Views（视图）

App。PageView=Mov。page view . extend()；

上面的代码在View层与通常的Ember.js App继承不同，主要区别是所有视图都是从Mov继承的，那么Mov是什么呢？

Mov是在embed-bridge-jqm中定义的，可以在assetswwmembemberber-bridge-jqm . js中找到，为什么Ember.js不能直接和jQuery Mobile一起使用而不是“代理”？

Ember.js之所以“入侵”，是因为它在实现时修改了HTML代码。众所周知，jQuery Mobile也是一个“入侵”类库。比如将div data-role='header'/div等代码改为" div data-role=' header ' class=' ui-header ui-bar-a ' role=' banner '/div。这两个“入侵性”类库放在一起，会出现各种未知错误，于是就有了像Ember-bridge-jqm.js这样的“代理”类库。

通常，典型的jQuery Mobile具有以下结构：

div数据-角色='page' div数据-角色='header'/div div数据-角色='content'/div div数据-角色=' foot '/div/div

加上embed-bridge-jqm.js，HTML结构可以直接用JavaScript实现：

App。PageView=Mov。page view . extend()；App。HeaderView=Mov。header view . extend()；App。FooterView=Mov。footerview . extend()；App。ContentView=Mov。content view . extend()；

注意：以上代码分别实现了jQuery Mobile的“页面”“页眉”“内容”“页脚”视图。

以上是View层的关键代码，主要负责实现jQuery Mobile的结构。接下来看Model的代码。

Model（模型）

定义了以下数据结构(值对象):

App。文章=Ember。Object.extend({ title : null，link : null，desc : null，creator : null，date : null })；

上述结构与简易资讯聚合源的可扩展置标语言节点保持一致。由于需要处理XML，因此增加一个叫做ServicesModel的函数，功能是读取XML，代码如下：

App .服务模型=函数(目标，url ) { $ .ajax({ type : 'GET '，url : url，success :函数(XML){//GET JSON var JSON=$。XML 2 JSON(XML)；//调用json2obj App .Json2Obj(目标，Json。项目)；} });}

ServicesModel具有如下功能：

使用埃阿斯方式读取简易资讯聚合源。

将读取的可扩展置标语言转化为数据对象。

调用App .Json2Obj。

再看一下Json2Obj的实现：

App .Json2Obj=function(target，tmp ) { target.set('content '，[])；$(tmp).每个（函数（指数，值){ var tmp=App .文章。创建({ title : value。title，link : value.link，desc : value.description，creator : value.creator，date : value.date，})；目标。PushObject(tmp)；});}

Json2Obj具有如下功能：

循环遍历传入的数据对象，并将遍历后的内容保存到签证官(App .Articles.create())。

通过pushObject将每个遍历后的App .文章保存到目标（传入的参数)。

注：pushObject是Ember.js方法，与恩伯阵列控制器一同使用，将循环遍历（每个)后的签证官(App .文章)保存到(pushObject)数组控制器的内容中。

以上就是型号（模型)层的关键代码，主要负责实现可扩展置标语言的读取、解析和保存，接下来看一下控制器（控制器)的代码。

Controller（控制器）

app。GetArticles控制器=成员.arraycontroller。create({ content :[]，init : function(){//call services model App .服务模式（这个，' http://feeds . adobe.com/XML/RSS . cfm？query=bymostrencetlangles=5 ')；} });

getArticlesController具有如下功能：

实现Ember.js的控制器app。GetArticles控制器=成员.arraycontroller。create()；

调用模型层的ServicesModel，并传入两个参数：

这个（供使用pushObject方法)

URL(传入解析用的简易资讯聚合地址)

总结

以上就是Java脚本语言端手动音量调节各层的关键代码，代码的实现与其他框架并无太大的区别，需要注意的是如何使用Ember.js方式实现手动音量调节结构的写法：

模特：恩伯反对。extend()；

观点：Mov .页面视图。extend()；

管制员：恩伯arraycontroller .create()；

接下来看一下超文本标记语言端的Ember.js写法，并展示Ember.js有别于其他手动音量调节框架的特点：用户界面绑定。

HTML端相关类库的引入

头标签内：

！- jquery mobile - link rel='样式表href=' jqm/jquery。移动一号。2 .0 .量滴CSS '/！-customer-link rel=' style sheets ' href=' style sheets/style。CSS '/

身体标签内：

！-common-script src=' common/jquery-1。8 .2 .量滴js '/script script src=' common/jquery。XML 2 JSON。js '/脚本！-jquery mobile-script src=' jqm/jquery。移动一号。2 .0 .量滴js '/脚本！-恩伯。js-script src=' ember/ember-0。9 .8 .1 .量滴js '/script script src=' ember/ember-bridge-jqm。js '/脚本！-客户-脚本src=' JavaScript/app。js '/脚本！-phone gap-script src=' phone gap/Cordova-2。0 .0 .js '/脚本

注：之所以要把脚本放到身体标签中主要基于加快加载速度的考虑。

jQuery Mobile结构的实现（ember-bridge-jqm的运用）

在身体中加入如下代码：

脚本类型=' text/x-handlers '数据-模板-名称=' main '/脚本差异数据-角色='page'/div

注：数据-模板-名称的值一定要设定为" main "

在JavaScript/app。射流研究…的视图（视图)层中加入如下代码：

App .页面视图=Mov .页面视图。extend({ templatename : ' main '，id: 'page-view '，DidInsertElement : function(){ $。手机。换页(这.$());} });

注：App .PageView.templateName和编号的值一定按照上述设定。

在超文本标记语言端加入如下代码：

{ { #查看App .HeaderView}}.{{/view}} {{#view App .ContentView}}.{{/view}} {{#view App .FooterView}}.{{/view}}

这些代码的结构等价于jQuery Mobile的结构：

差异数据-角色='页眉/div数据-角色='内容/div数据-角色='页脚/div

注：App .标题视图、应用程序。内容视图、应用程序FooterView .定义在JavaScript/app。射流研究…中，{{}}是模版引擎（车把。js)的语法。

Listview（UI Binding）的实现

在JavaScript/app . js中添加一个新的View图层，并将其命名为ListView:

App。ListView=Mov。listview . extend()；

在HTML端添加以下代码：(强调)

{ { #查看App。ContentView } } { { #收藏App。ListView ContentBinding=' App . GetArticles controller ' } } a { { BiNDAttr href=' content . link ' } } data-Ajax=' false ' H3 { { content . title } }/H3 pvia { { content . creator } }/p p { { { content . desc } } }/p/a { {/collection } } {/view } }

具有以下功能：

定义了一个内容视图，并向其中添加了列表视图。

列表视图的内容绑定设置为App.getArticlesController，因为列表视图是一个数组结构(app . GetArticlescontroller=embed . arraycontroller . create()；)所以使用关键字Collection而不是View。

Content.title、content.creator和content.desc是从app . getarticlescontroller . content派生出来的，app . getarticlescontroller . content的值来自调用pushObject。根据App的代码。Json2Obj、content.title、content.creator、content.desc分别存储App。解析XML后的文章(值对象)值。

注意：bindAttr href='content.link '不写成：a href='{{ content.link }} '，因为当Ember.js " injects "代码时，会生成脚本id=' meta morph-0-start '类型=' text/x-placeholder ' XXX/script等结构，所以在设置href时不能直接写{{ content.link }}，只能使用bindAttr。

总结

Embe.js由Collection、pushObject和模板引擎(Handlebars.js)实现。

PhoneGap

由于phonecap只起到打包(Android App)的作用，不使用phonecap的相关功能，所以不需要引入脚本src=' phonecap/Cordova-2 . 0 . 0 . js '/脚本，可以直接打包，省略phone cap的流程。

结论

Ember.js和jQuery Mobile都是“入侵”框架，尽量不要一起使用。如果它们一起使用，它们需要“嵌入-桥接-jqm”。

由于Ember.js和jQuery Mobile的“不兼容”，在编写jQuery Mobile组件时，不能直接写入HTML，而要写入Handlebars.js的模板(对于动态生成的组件)

与Ember.js匹配的UI库尽可能的无创，比如Bootstrap。

Ember.js最强大的方面之一是UI绑定。(由Collection、pushObject和模板引擎(Handlebars.js)实现)

如果你熟悉可可，你会在Ember.js找到它

如果你熟悉Flex，你会发现“dataProvide”和“itemrender”这两个久违的属性。