使用 Wijmo 和 KnockoutJS 创建在线股票走势图应用

背景
随着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 主页。