背景
随着Android、iPhone、iPad等手持设备的推出。用户对手持设备上程序的流畅程度要求也越来越高。伴随着HTML5的推出,开发者们可以结合JavaScript 代码库实现流畅如桌面程序的BS程序。
目前为止,针对大多数开发人员而言,使用JavaScript 和 HTML 编写应用程序也是颇为困难的。因为开发者不仅需要实现业务逻辑,同时还需要在用户界面、使用 JS 操作所有的 DOM 元素上花费大量心思。 相对而言,使用Silverlight 创建 Web 应用程序更加容易,因为业务逻辑和用户界面可以相对独立的设计,然后通过“声名式绑定”连接业务逻辑和用户界面。

自从jQuery,jQuery UI 和 KnockoutJS 发布以来,这种状况有所改变。这些 JS 库包含标准、统一的HTML 标签操作方法(jQuery)、添加界面插件(jQuery UI),还包含使用KnockoutJS 连接业务逻辑层和用户界面。

这篇文章简略的描述了Invexplorer的使用方法和制作方法。Invexplorer是一款类似于Google 财经的股票走势图应用,使用 HTML5和JavaScript编写。
在浏览器中打开

用户可以通过自动完成文本框添加股票。如果我们在文本框中输入“ford mot”,文本框会自动关联出和“ford mot”相关项列表。我们从列表中选择目标,点击“Add to Portfolio”按钮,该股票就被添加到股票走势图表中了。我们可以通过点击Chart列下复选框来控制是否显示某支股票的走势图,同时我们可以通过双击表格中的单元格编辑股票数据。

当用户打开应用程序,股票信息就会自动加载。
应用使用 MVVM 模式开发,View 模式类使用KnockoutJS 库实现。用户界面通过HTML5 和自定义控件实现: Wijmo jQuery 库自动完成文本框和图表。Wijmo jQuery 库可以完美的兼容KnockoutJS 。
如果对 Silverlight 版本感兴趣,请点击这里。

免责声明:
  1. Invexplorer 是一款用于展示KnockoutJS 和自定义控件。数据来源为Yahoo 财经,Yahoo财经为付费服务。如果您在本程序的基础上进行二次开发,请联系Yahoo 获得使用许可。如果产生纠纷,本博客概不负责。
复制代码
本文章中一些名词解释
简要的MVVM介绍
MVVM是Model-View-ViewModel的简写。

可以说MVVM是专为WPF打造的模式, 也可以说MVVM仅仅是MVC的一个变种, 但无论如何, 就实践而言, 如果你或你的团队没有使用"Binding"的习惯, 那么研究MVVM就没有多大意义。更多内容请参考:什么是MVVM

简要的KnockoutJS介绍
KnockoutJS 提供两个重要的元素使用MVVM模式:
•    JavaScript 类observable 和observableArray,用于监视ViewModel 变量的变动。
•    当页面中变量改变时,和observables 关联的HTML 扩展标记会自动更新数据。HTML扩展标记是非常丰富的,除了展示数值和字符串,他们也可以用于定制样式、展示列表、表格、图表等。这些The markup extensions are similar to Binding objects in XAML development.
使用KnockoutJS 开发程序,首先我们需要从创建包含业务逻辑ViewModel 的类开始。这些类可以通过在创建 View 之前进行测试。View 层使用HTML CSS 创建。
最后,通过KnockoutJS ApplyBindings 方法连接ViewModel和View,在这个方法中Object 模式被作为参数实际上创建绑定。
在我看来,KnockoutJS仅仅是一个外壳、一个框架。在我看来,这些只是JS 框架的一些延伸。KnockoutJS 拥有丰富的官方例子、资源和详细的文档,可以从KnockoutJS 的官网获取knockoutjs.com 。

Wijmo
由于篇幅限制,这里就不过多解释了,请参考百度百科 Wijmo
Invexplorer
原始的Invexplorer 应用程序基于Silverlight开发,使用MVVM 模式(查看Silverlight版本)。KnockoutJS 发布之后,我们通过HTML5/JavaScript 实现了该程序。
转移代码到KnockoutJS 仅仅用了几天的时间。工作量最多的部分是使用 JavaScript 写 View 模式,使用KnockoutJS 库区实现observable 对象。编写View十分容易,因为我们可以很容易的获取所使用的控件:自动完成控件和 Wijmo Chart 图表控件。
View Model Implementation (JavaScript)
View 模式类图:


使用资源:
1.    http://demo.componentone.com/wijmo/InvExplorer/:  本例的在线例子。
2.    http://publicfiles.componentone.com/Bernardo/MVVM in Silverlight and in HTML5 IX.pdf: Silverlight 和 JS 版本比较说明.
3.    http://knockoutjs.com/: KnockoutJS 主页。
4.    http://jqueryui.com/: jQueryUI 主页。
5.    http://wijmo.com/: Wijmo 主页。