TypeScript accomplish MVVM pattern(TypeScript实现MVVM)
来源:互联网 发布:webshell采集器 编辑:程序博客网 时间:2024/05/22 08:49
Hello Everyone, 经过上一篇“野蛮”的创建了个TypeScript版的windows store app,这次我们再用这个来实现MVVM模型吧,虽然TypeScript技术比较新潮,但仔细想想,其实也不会非常的困难,相反却提供了很多便利。它和C#语言有太多的相似之处,毕竟是同一个大牛开发出来的嘛。话不多说,开始实行吧。
1. 目前我创建了一个非常干净的项目,都是些默认的文件,唯一动过的default.ts也是空的。
2. 现在我们需要添加lib, winjs, winrt的Typescript定义,借用一下Rachel Appel在在新型应用程序中使用 TypeScript的一段话
下面我们要添加这些声明文件了,好在VS库里有现成,如果手动添加再编辑内容的话,那不知道要写到猴年马月了。我们可以去上面图片上的地址去下载或者去这个地址TypeScript CodePlex,也可以自己安装,打开工具->Nuget程序包管理器->管理解决方案的NuGet包(N)...或者鼠标右键点击当前项目,我们也可以看到菜单“管理解决方案的NuGet包(N)...”,然后我们会看到如下对话框
在搜索栏里键入“tag:typescript winjs”,找到它的包然后点击安装,安装完之后会看到项目里增加了相应的文件夹和文件
然后继续在搜索栏里键入“tag:typescript jquery”来安装Jquery的包,如果未能用此方法找到lib.d.ts的话,我们可以去TypeScript CodePlex下载,而这次我们也需要knockout库的函数来实现绑定,因此还需要knockout的声明,可以用同样的方法“tag:typescript knockout”来安装。
这些库的声明是完成了,但是没有实现的代码怎么能行呢,所以现在我们要下载安装Jquery和Knockout的真正实现的文件了,这样我们TypeScript的声明才有效,才能用。
下面打开工具->NuGet程序包管理器->程序包管理器控制台
在程序包管理器控制台分别键入“install-package jquery” 和“install-package knockoutjs”来安装Jquery和Knockout,我们会看到项目的Script文件夹多了一些js文件,这些js文件就实现了Jquery和Knockout的机制。
好了,所有的准备工作已经做完,现在开始实现我们的MVVM了。
1.首先添加一个程序入口文件,这里我将js/default.ts作为入口,这相当于C#版里的App.cs或者WinForm程序的Program.cs。添加如下代码
///<reference path='..\Scripts\typings\winjs\winjs.d.ts'/>///<reference path='..\Scripts\typings\winrt\winrt.d.ts'/>module Default { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; var nav = WinJS.Navigation; //WinJS.strictProcessing(); app.addEventListener("activated", function (args: any) { if (args.detail.kind === activation.ActivationKind.launch) { var launchEv = <Windows.ApplicationModel.Activation.LaunchActivatedEventArgs>args.detail; if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } } }); app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. If you need to // complete an asynchronous operation before your application is // suspended, call args.setPromise(). app.sessionState.history = nav.history; }; app.start();}2.添加viewModel文件夹和相应的viewModel,这里我创建了一个mainViewModel.ts。并添加如下代码
///<reference path='..\Scripts\typings\knockout\knockout.d.ts'/>module TypeScriptApp.viewModels { export class mainViewModel { // The said words. Binded in view. public words = ko.observable<string>(); constructor() { } /** * Mehtod for saying. */ public say(): void { this.words("Hello!"); var messageDialog = new Windows.UI.Popups.MessageDialog("Hello!"); messageDialog.showAsync(); } }}
3.添加views文件夹,我将default.html更名为mainView.html,让MVVM看起来更和谐些。下面我们要做的是为mainView.html添加codebehind的ts文件,为其绑定mainViewModel.ts。
1)重命名和移动文件后,记得要修改package.appxmanifest文件,将其起始页改为views\mainView.html
2)为mainView.html添加codebehind文件,mainView.html.ts,并添加如下代码
///<reference path='..\Scripts\typings\winjs\winjs.d.ts'/>///<reference path='..\Scripts\typings\winrt\winrt.d.ts'/>///<reference path='..\Scripts\typings\knockout\knockout.d.ts'/>module TypeScriptApp.views { "use strict" var appView = Windows.UI.ViewManagement.ApplicationView; var appViewState = Windows.UI.ViewManagement.ApplicationViewState; var nav = WinJS.Navigation; var ui = WinJS.UI; ui.Pages.define("/views/mainView.html", { ready: function (element, options) { ko.applyBindings(new TypeScriptApp.viewModels.mainViewModel(), element); }, });}可能你会觉得mainView.html和mainView.html.ts被分开的放在views文件夹中会影响美观和冗余,我们可以更改项目文件把他们整合起来,只要找到mainView.html.ts的节点并改成如下格式即可
<TypeScriptCompile Include="views\mainView.html.ts" > <DependentUpon>mainView.html</DependentUpon> </TypeScriptCompile>
看此时两个文件整合起来了
3)下面我们来修改mainView.html,来绑定viewmModel里的属性和事件。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <title>TypeScriptApp</title> <!-- WinJS 引用 --> <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.2.0/js/base.js"></script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script> <!-- TypeScriptApp 引用 --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> <script src="/Scripts/knockout-3.2.0.js"></script> <script src="/Scripts/jquery-2.1.1.js"></script> <script src="/views/mainView.html.js"></script> <script src="/viewModels/mainViewModel.js"></script></head><body> <div> <div> <h2>You have said: </h2> <h2 data-bind="text:words"></h2> </div> <div> <label>Say:</label> <input type="text" data-bind="value:words"/> </div> <button data-bind="event: { click: say} ">Say</button> </div></body></html>
这里要注意引用script文件
我们引用的是js文件而不是ts文件,因为ts文件最终编译生成js文件,真正有效的最后还是js文件,我们不用刻意去添加相应的js文件,只要这样引用就可以了。
最后运行一下程序
虽然界面有点丑,但总算是把MVVM给实现了啊。
源代码下载:http://download.csdn.net/detail/leyyang/7984687
- TypeScript accomplish MVVM pattern(TypeScript实现MVVM)
- typescript
- TypeScript
- typeScript
- typescript
- TypeScript
- TypeScript
- typescript
- TypeScript
- TypeScript
- TypeScript
- TypeScript
- TypeScript
- TypeScript
- TypeScript
- typescript
- Typescript
- Pattern – MVVM?
- TF
- 解决android logcat不打印信息
- XMPPFrameWork IOS 开发 创建聊天室不能持久保存的解决办法
- java 抽象类
- JQuery模拟Windows 桌面例子程序
- TypeScript accomplish MVVM pattern(TypeScript实现MVVM)
- 删除系统日文输入法
- UITableView开发流程
- hadoop-2.2.0配置eclipse插件(windows和linux平台)
- sync/fsync/fdatasync的简单比较
- 不能上外网,好蛋疼
- 黑马程序员——iOS开发——oc——NSString的学习
- 如何收集系统最繁忙时段的AWR性能报告
- 关于IEEE754 规格数与非规格数的探讨 | IEEE 754-1985 IEEE 754-2008