使用 Typescript 和 requirejs 时,我将 Knockout.js 扩展放在哪里 [英] Where do i put my Knockout.js Extensions when using Typescript and requirejs
问题描述
我正在将一些 javascript 代码移植到 typescript 并使用 requirejs.我有一个 config.ts:
I am in the process of porting some javascript code to typescript and using requirejs. I have a 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>
在我的页面上刚刚有一个执行以下操作的脚本标签之前:
Before i just had a scripttag on my page that executed the following:
ko.bindingHandlers.csharpTypes = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
switch (value) {
case 'System.Boolean':
element.type = 'checkbox';
break;
case 'System.String':
element.type = 'string';
break;
case 'System.DateTime':
//$(element).replaceWith("<input placeholder='value' data-bind='value:value, uniqueId: name, csharpTypes:type'/>");
element.type = 'datetime';
break;
default:
element.type = 'number';
}
}
};
并且扩展名被添加到淘汰赛中.我不是 100% 确定我现在会把这段代码放在哪里?如果它在页面中,它在淘汰赛之前加载由 requirejs 加载.我想我需要用requirejs加载它,我只是不确定我会怎么做.在打字稿类中或可能只是在 config.ts 中?
and the extension was added to knockout. I am not 100% sure where i would put this code right now? If its in the page, its loaded before knockout get loaded by requirejs. I assume i need to get it loaded with requirejs, i am just not sure about how i would do it. In a typescript class or maybe just in the config.ts ?
require(['DataLayer', 'signalR', 'ko'], (d ) => {
alert('test');
var app = new d.DataLayer();
app.run();
// app.run();
});
我试过了:
extensions.ts
I have tried:
extensions.ts
///<reference path="knockout.d.ts" />
export class KnockoutExtenions {
// Constructor
constructor() {
ko.bindingHandlers.csharpTypes = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = valueAccessor();
switch (value) {
case 'System.Boolean':
element.type = 'checkbox';
break;
case 'System.String':
element.type = 'string';
break;
case 'System.DateTime':
//$(element).replaceWith("<input placeholder='value' data-bind='value:value, uniqueId: name, csharpTypes:type'/>");
element.type = 'datetime';
break;
default:
element.type = 'number';
}
}
};
}
}
但是它给了我一个关于 ko.bindinghandlers 的 csharpTypes 的错误.
but it gives me a error on the csharpTypes of ko.bindinghandlers.
推荐答案
您可以开箱即用地扩展现有的 TypeScript 接口.要定义您自己的绑定处理程序,您需要做的就是:
You can extend existing TypeScript interfaces out of the box. To define your own binding handlers, all you need to do is:
- 提供定义文件(比如
myBindings.d.ts
) 添加以下代码
- provide a definition file (say
myBindings.d.ts
) add the following code
interface KnockoutBindingHandlers {
csharpTypes: KnockoutBindingHandler;
}
这篇关于使用 Typescript 和 requirejs 时,我将 Knockout.js 扩展放在哪里的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!