TypeScript和Knockout.js的结合使用
2017-02-03 16:21
330 查看
这里假设你的电脑上已经安装了Node.js,我也是刚刚接触Node.js,准备在今年好好研究下这个东西,听说很是强大呀。另外,不知道你对npm了解多少,这里默认为你对这些知识是了解的。下面列出几个常见的命令,后面会使用到。
创建文件夹:mkdir dir
初始化工程:npm init
安装TypeScript:npm install -g typescript
获取knockout的声明文件:npm install –save @types/knockout
将所有部分整合在一起:tsc
接下来我们创建一个工程proj,获取运行时依赖,这里需要两个js,分别是knockout.js和require.js,require.js可以让我们在代码运行时异步加载模块。在这之后我们在工程的根目录下添加一个TypeScript的配置文件tsconfig.json,内容如下:
工程的目录结构大概如下所示:
接下来看看hello.ts文件中的内容:
再看看require-config.ts文件中的内容:
最后,看看index.html文件中的内容:
以上就是一个简单的结合使用的例子,如需下载代码,请点击下载。
创建文件夹:mkdir dir
初始化工程:npm init
安装TypeScript:npm install -g typescript
获取knockout的声明文件:npm install –save @types/knockout
将所有部分整合在一起:tsc
接下来我们创建一个工程proj,获取运行时依赖,这里需要两个js,分别是knockout.js和require.js,require.js可以让我们在代码运行时异步加载模块。在这之后我们在工程的根目录下添加一个TypeScript的配置文件tsconfig.json,内容如下:
{ "compilerOptions": { "outDir": "./built/", "sourceMap": true, "noImplicitAny": true, "module": "amd", "target": "es5" }, "files": [ "./src/require-config.ts", "./src/hello.ts" ] }
工程的目录结构大概如下所示:
接下来看看hello.ts文件中的内容:
import * as ko from "knockout"; class HelloViewModel { language: KnockoutObservable<string> framework:KnockoutObservable<string> constructor(language:string, framework:string){ this.language = ko.observable(language); this.framework = ko.observable(framework); } } ko.applyBindings(new HelloViewModel("TypeScript", "Knockout"));
再看看require-config.ts文件中的内容:
declare var require: any; require.config({ paths: { "knockout": "externals/knockout-3.4.0", } });
最后,看看index.html文件中的内容:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello Knockout!</title> </head> <body> <p> Hello from <strong data-bind="text: language">todo</strong> and <strong data-bind="text: framework">todo</strong>! </p> <p>Language: <input data-bind="value: language" /></p> <p>Framework: <input data-bind="value: framework" /></p> <script src="./externals/require.js"></script> <script src="./built/require-config.js"></script> <script> require(["built/hello"]); </script> </body> </html>
以上就是一个简单的结合使用的例子,如需下载代码,请点击下载。