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();
});
it being loaded with:
<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';
}
}
};
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
///<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';
}
}
};
}
}
but it gives me a error on the csharpTypes of ko.bindinghandlers.
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model.
Knockout. js is an open source library (under the MIT License) that is pure JavaScript that works with any existing web framework and every mainstream browser. Further, Knockout. js is fully documented with a complete set of online tutorials.
KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps developers build rich and responsive websites.
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
)add the following code
interface KnockoutBindingHandlers {
csharpTypes: KnockoutBindingHandler;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With