我一直在寻找一个简单的操作方法,使用RequireJS,jQuery和KnockoutJS创建Visual Studio 2012 TypeScript项目的最基本示例.有几个可用的例子,但对我来说,有些比我想要的更复杂,所以我开始创建一个方法,并将其发布在这里供公众审查.我已经回答了我自己的问题,作为问答风格的知识共享练习.
对于那些不熟悉的人,这里是包含组件的快速细分...
TypeScript - 一种Visual Studio扩展,允许脚本通过JavaScript的超集语言创建.TS文件.这提供了定义与方法和变量相关联的数据类型的能力 - 否则JavaScript将丢失这些数据类型.通过这样做,编译时间检查可以确保正确使用以尝试减少运行时冲突.构建Visual Studio项目时,Visual Studio扩展会将脚本编译为实际的JavaScript.因此,这个扩展附带了它自己的编译器--tsc.exe.预计生成的JavaScript文件将部署到生产环境,而不是源代码.ts文件.
jQuery - 用于HTML文档遍历和操作,事件处理,动画和Ajax交互的JavaScript框架.
RequireJS - 依赖加载器.有时JavaScript引用会变得疯狂.这试图帮助解决这些问题.我的示例显示,即使使用了许多JavaScript文件,HTML也只引用一个 - 加载其他文件的根JavaScript文件.
KnockoutJS - 利用MVVM模式进行UI绑定.HTML视图引用视图模型中的变量和方法.视图模型是一个JavaScript对象(JavaScript文件可能是编译.ts文件的结果 - 请参阅上面的TypeScript).
DefinitelyTyped - 还包括两个DefinitelyTyped NuGet包.由于TypeScript正在尝试验证数据类型的使用情况,因此它正在执行检查以确保它知道所有引用.JavaScript比这更松散.为了满足TypeScript(当引用外部JavaScript对象时),我们需要一种方法来描述(对TypeScript)我们期望使用的对象.这些DefinitelyTyped脚本提供了此定义.它们不提供任何功能,只是TypeScript编译器的清晰度,因此它可以执行这些检查.
在下面的示例中,您将看到
/// <reference path="../Scripts/typings/requirejs/require.d.ts" />
这就是TypeScript编译器将包含requirejs DefinitelyTyped定义文件的方式.创建这些DefinitelyTyped脚本的组织创建了一个庞大的集合.这里我们只提到两个 - KnockoutJS和RequireJS(好吧,因为这是本教程的范围)
我有下表
<table class="datatable zebra-striped">
<thead>
<tr>
<th>Name</th>
<th>Issue</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: Publications">
<tr>
<td><span data-bind="text: Name" /></td>
<td><span data-bind="text: IssueNumber" /></td>
<td><button type="button" class="btn" data-bind="click: $parent.DeletePublication">Delete</button></td>
</tr>
</tbody>
</table>
以下是viewmodel的片段:
function EditReaderViewModel() {
var self = this;
self.Publications = ko.observableArray([]);
self.OnAddPublicationSaveButtonClicked = function () {
//.. code omitted.
self.Publications.push(new Publication(publication.value, publication.label, publication.issueNumber));
};
};
}
和绑定到表的Publication对象:
function Publication(id, name, issueNumber) {
var self = this;
self.Id = id;
self.Name = name;
self.IssueNumber = issueNumber;
self.LoadedFromDatabase = false;
} …我正在将一些javascript代码移植到typescript并使用requirejs.我有一个config.ts:
//file config.ts
///<reference path="../require.d.ts" />
///<reference path="DataLayer.ts" />
require.config({
baseUrl: '/scripts/App/',
paths: {
'jQuery': '/scripts/jquery-1.9.1',
'ko': '/scripts/knockout-2.2.1',
'signalR': "/scripts/jquery.signalR-1.0.1",
},
shim: {
jQuery: {
exports: '$'
},
signalR:{
deps: ["jQuery"]
},
ko: {
deps: ["jQuery"],
exports: 'ko'
}
}
});
// load AMD module main.ts (compiled to main.js)
// and include shims $, _, Backbone
require(['DataLayer', 'signalR', 'ko'], (d ) => {
alert('test');
var app = new d.DataLayer();
app.run();
// app.run();
});
它被加载:
<script data-main="/Scripts/App/config" type="text/javascript" src="~/scripts/require.js"></script>
在我刚在我的页面上有一个执行以下内容的脚本标签之前:
ko.bindingHandlers.csharpTypes …