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