TypeScript accomplish MVVM pattern（TypeScript实现MVVM）

最新推荐文章于 2023-07-27 18:53:07 发布

SamYoc

最新推荐文章于 2023-07-27 18:53:07 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web Windows Store App TypeScript 文章标签： typescript mvvm knockout Windows Store App winrt

本文链接：https://blog.youkuaiyun.com/LeyYang/article/details/39583047

Web 同时被 3 个专栏收录

17 篇文章

订阅专栏

Windows Store App

3 篇文章

订阅专栏

TypeScript

3 篇文章

订阅专栏

本文指导如何在TypeScript环境下创建干净项目，并通过添加特定声明文件、安装库和实现代码来构建MVVM模型，最终展示界面操作与响应的无缝集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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文件