打开。

用户可以通过自动完成文本框添加股票。如果我们在文本框中输入“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 模式类图:

http://wijmo.com/: Wijmo 主页。