怎么使用HTMl5移动开发框架PhoneJS

配置PhoneJS应用框架逻辑的代码TipCalculator是一个使用HTML5构建的单页应用。起始页是带有标准元标签、index.html以及CSS和JavaScript资源链接。它包含有一个JavaScript文件index.js的脚本引用，内有配置PhoneJS应用框架逻辑的代码：  1     TipCalculator.app = new DevExpress.framework.html.HtmlApplication({2      namespace: TipCalculator,3      defaultLayout: 'empty'4      });在本段代码中，我们必须要指定App的默认布局。在这个例子中，我们使用了最简单的空布局，而其更高级的布局还能为交互式导航风格提供完整支持。PhoneJS采用了许多服务器方框架支持的固定布局方法，包括Ruby on Rails和ASP.NET MVC。想要了解关于视图和布局的详细信息，可点击链接查看PhoneJS在线文档。

如何配置试图导航为了在SPA中配置视图导航，我们必须要在index.js中添加一行代码：1      TipCalculator.app.router.register(':view', { view: 'home' });该语句是用来注册一个从URL检索视图名称的简单导航。主视图采用默认，每一个视图在其HTML文件中定义，并链接到主App页面index.html：  1     

通过views/home.js脚本创建视图模型的Home功能在程序中使用视图模型可以带来很多好处，一个视图模型代表着视图所使用的数据和操作。每一个视图都有一个具备与视图本身相同的基名称，以及给视图返回视图模型的功能。而对于Home视图，则通过views/home.js脚本来定义创建相应视图模型的Home功能。   1     TipCalculator.home = function(params) {2      ...3      };

PhoneJS视图模型中提供可见函数的Knockout.js在此，我们举一个非常简单的计算小费的例子。在小费计算算法中使用了三个输入参数：账单总额、分摊人数及小费百分比。这些变量被定义为会绑定相应的UI部件的可见函数。而可见函数的功能就是由PhoneJS的视图模型中的Knockout.js提供的。（1）初始化home变量1      var billTotal = ko.observable(),2      tipPercent = ko.observable(DEFAULT_TIP_PERCENT),3      splitNum = ko.observable(1);（2）标准的Knockout.js功能小费计算的结果由四个值表示：totalToPay、totalPerPerson、totalTip、tipPerPerson。每个值都是相互作用的计算值，只要其中任何一个值发生变动，程序便会自动进行重算。这便是标准的Knockout.js功能。1     var totalTip = ko.computed(...);2     var tipPerPerson = ko.computed(...);3     var totalPerPerson = ko.computed(...);4     var totalToPay = ko.computed(...);

视图模型中业务逻辑的实现接下来，我们再举一个视图模型中业务逻辑实现的例子，对可度量值totalToPay进行更深入的研究。应付总额往往会四舍五入取整数。为此，我们要设定roundUp、roundDown两个参数来调整roundMode值。由于roundMode与totalToPay的可度量值有关，因此也会直接导致totalToPay进行重新计算。1      var totalToPay = ko.computed(function() {2      var value = totalTip() + billTotalAsNumber();3      switch(roundMode()) {4          case ROUND_DOWN:5               if(Math.floor(value) >= billTotalAsNumber())6                     return Math.floor(value);7               return value;8           case ROUND_UP:9                    return Math.ceil(value);10         default:11                    return value;12        }13        });一旦视图内的输入参数发生改变，程序就应立即禁用取整功能，以便用户查看精确数额。我们通过对UI度量值的变更来实现这一功能：1      billTotal.subscribe(function() {2      roundMode(ROUND_NONE);3      });4      tipPercent.subscribe(function() {5      roundMode(ROUND_NONE);6      });7      splitNum.subscribe(function() {8      roundMode(ROUND_NONE);9      });以上只是典型的视图模型的一个非常简单的例子，如果想要查看完整的视图模型可详看home.js。

view/home.html中的视图标记再看来看看view/home.html中的视图标记，根div元素代表一个视图的“home”命名，里面是一个包含“content”占位符标记的div。1     

位于视图顶端的工具栏1    

如何进行部署和调试和HTML5应用一样，启动、调试一款PhoneJS App，必须对包含HTML和JavaScript源的文件夹及其它所需资源在Web服务器上进行部署。由于PhoneJS无服务器端组件，因此使用哪种Web服务器并没有什么区别，只要支持通过HTTP协议访问所需文件资源即可。一旦部署成功，你可以在设备或模拟器上打开App，当然，也可以在桌面浏览器上输入URL进行访问。如果想要通过桌面浏览器查看在智能手机或平板电脑上的运行效果，就必须重新设置浏览器的UserAgent（用户代理）属性。幸好现在许多浏览器都为开发者提供了相关的开发工具，操作也就变得非常简单。

使用Ripple Emulator模拟当然，如果不想修改UserAgent设置，也可以使用Ripple Emulator来模拟不同设备的运行效果。