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

2019-09-08 郑州网站建设  

随着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源)。

将XML的内容以列表的形式展示出来。

点击任意列表项目(Item),可以跳转到相应地址。

项目依赖

jQuery(1.8.2版)

download地址:

替代JavaScript语法。

jQuery Mobile(1.2.0 Final版)

download地址:

实现UI构建。

Ember.js(0.9.8.1版)

download地址:

实现MVC架构。

Ember-bridge-jqm(0.1)

download地址: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

download地址:请看范例文件

XML转JSON的jQuery插件。

PhoneGap(2.0.0 版)

download地址:

打包App时需要。

范例文件

附件

通过本文将学会

理解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文件。

项目架构

代码分析

下面将展示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定义在ember-bridge-jqm中,可以在assetswwwemberember-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 data-role="page"> <div data-role="header"></div> <div data-role="content"></div> <div data-role="footer"></div> </div>

加入ember-bridge-jqm.js后,HTML结构可以直接用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" "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,代码如下:


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1437.html转载请标明出处,谢谢合作!
标签:

  • Ember.jsjQue
  • MobilePhoneG