Typescript and Extending kendo DataSource - kendo-ui

I'm using KendoUI and typescript in my application and i want convert this code to typescript:
var customDataSource= kendo.data.DataSource.extend({
init: function (options) {
kendo.data.DataSource.fn.init.call(this, options);
}
});
But typescript can't convert and display error in this line:
kendo.data.DataSource.fn.init.call(this, options);
what is wrong?(I'm using kendo.all.d.ts)

A simpler quick fix:
Just use any:
(<any>kendo.data.DataSource).fn.init.call(this, options);
Complex better fix :
TypeScript cannot infer that init is now a member function of kendo.data.DataSource. Depending upon what the type of kendo.data.DataSource is you can tell typescript about it. I am assuming the type is something like kendo.data.IDataSource
declare module kendo{
module data{
interface IDataSource{
init:Function;
}
}
}

Related

Dynamic localization in vue-i18n

I would like to update my localization messages in vue-i18n dynamically.
I am building a webshop, where every item has descriptions in more languages. So what I’d like to achieve is when I get the webshop items from the REST API I want to put their names, descriptions etc. to the messages object in vue-i18n so it can work with them. Does the vue-i18n API have something to handle that? Also I am getting the data from the server (I get a Promise), so how can I make sure it gets updated in the browser view, when I finally get the response, and add the data to the localization?
What I did was write a mixin, and use it everywhere I need dynamic localization:
export default {
methods: {
$t: function (translate) {
if (typeof translate === 'string') {
return this.$i18n.t(translate)
} else if (translate === void 0) {
return this.$i18n.t('loading')
}
return translate[this.$i18n.locale]
}
}
}
This way when my texts look like the following, I can call $t(text) (NOT $t('text') of course):
data: function () {
return {text: {en:'Book', de:'Buch', hu:'Könyv'}}
}
So in your components you have to import this and add it as a mixin:
import dynamicLocalization from '#/components/mixins/dynamic-localization'
export default {
...
mixins:[dynamicLocalization]
...
}

Jasmine Unit testing define library that was imported as a global variable

I have a project that uses pdfMake to generate a PDF. To use it I include the file in my index.html
<script src='js/pdfmake.js'></script>
<script src='js/vfs_fonts.js'></script>
Inside pdfmake.js it declares global["pdfMake"] which then allows me to use the library in my service.
pdfService:
pdfMake.createPdf(docDefinition).download(fileName);
Everything works great but when I tried to test ths method in my service I get an error that the test can't find the variable pdfMake. That makes sense considering it's loaded by index.html.
How can I replace this library with a mock in my test?
I've tried using a spy but since makePdf isn't a function that doesn't work. spyOn(service, 'makePdf').
I tried just setting it as a variable but that also didn't work and I get: Strict mode forbids implicit creation of global property 'pdfMake'
pdfMake = {
createPdf: jasmine.createSpy('createPdf').and.returnValue({
download: jasmine.createSpy('download')
}
}
I got the same problem and solved inserting the pdfMake mock on global variable window inside the unit test. So, in your case will be something like this:
window.pdfMake = {
createPdf: jasmine.createSpy('createPdf')
.and.returnValue({
download: jasmine.createSpy('download')
}),
};
I just fixed this issue by making below changes-
Declare pdfMake variable globally in your .ts file like-
declare var pdfMake;
And then mock the pdfMake function in your .spec file like this-
window['pdfMake'] = {
createPdf: function (param) {
return {
open: function () {
return true;
},
download: function () {
return true;
}
};
}
};

Sapui5 use my new controle in xml

this is how i create new control:
https://sapui5.hana.ondemand.com/sdk/#docs/guide/91f0a8dc6f4d1014b6dd926db0e91070.html
sap.ui.somelib.SomeControl.extend("my.OwnControl", {
...
init: function() {
if (sap.ui.somelib.SomeControl.prototype.init) { // check whether superclass implements the method
sap.ui.somelib.SomeControl.prototype.init.apply(this, arguments); // call the method with the original arguments
}
//... do any further initialization of your subclass...
}
Is possible to use some controle in my xml view ?
When defining a control like this:
sap.ui.core.Control.extend("my.Square", ...
and declaring the XML namespace
xmlns:my="my"
you can use your control like this:
<my:Square text="test" size="100px"/>
BUT only if you also declare your control as existing module:
jQuery.sap.declare("my.Square");
(this last part is missing in the other answer)
Here is a running example with the "Square" control from the documentation:
http://jsbin.com/zuxebev/1/edit?html,output

ExtJS4 modularization with stand-alone controllers?

I'm trying to split an ExtJS4 application into modules.
- app
- store
- controller
- model
- view
- module
- m1
- model
- view
- controller
- m2
- model
- ...
The problem is, when I start the application and it inits one of the m1 controllers, the controller has no this.control() function.
-- edit --
I defined a class inside of the controller folder.
Ext.define( 'App.module.ping.controller.Ping', {
extend: 'Ext.app.Controller',
requires: [
'App.module.ping.view.PingPanel'
],
init: function() {
this.control( {
'#app.module.ping': {
render: this.onPanelRendered
}
} );
},
onPanelRendered: function() {
...
}
} );
Later I call
Ext.create('App.module.ping.controller.Ping').init();
but I get this error:
Uncaught TypeError: Cannot call method 'control' of undefined
Ext.define.control./lib/extjs-4.1.0/src/app/Controller.js:414
Ext.define.init./app/module/ping/app/controller/Ping.js:11
Ext.define.init./app/module/ping/app/Module.js:11
(anonymous function)app.js:17
(anonymous function)app.js:35
Module.js is the file with the create() call
Ping.js is the file with the define() call
-- edit2 --
Pathological example:
input:
Ext.define( 'MyController', {
extend: 'Ext.app.Controller',
init: function() { console.log('initialized'); }
});
output:
function constructor() {
return this.constructor.apply(this, arguments);
}
input:
Ext.create('MyController');
output:
constructor
input:
MyController.create();
output:
constructor
-- edit3 --
The controllers require the application object in the config object when created. The application object adds itself to all the controllers, which are not manually created with create. It calls something like this:
Ext.create('App.controller.Users', { application: this, ... } );
Later it uses the application object to redirect the control call to it.
control: function ( config ) { this.application.control( config ) };
So I'm probably gonna implement some mechanism, which adds the application to those controllers automatically, when I create them.
Have you tried
var pingController = Application.getController('App.module.ping.controller.Ping');
pingController.init(); //or pingController.init(Application);
where Application is a reference to the object created during Ext.application.launch - such as
var Application = {};
Ext.application({
//all of your settings,
launch:function(){
Application = this;
//other launch code
}
}
});
To anyone else who comes here searching for a solution to:
Uncaught TypeError: Cannot call method 'control' of undefined
Day long frustration aside, the above answer did not solve my problem, but lead me to try the following, which did fix the issue:
// app.js
Ext.application({
...
launch: function(){
var me = this;
...
me.getController('ControllerName');
}
});
// inside controller/ControllerName.js
init: function(app){
var me = this;
app.control({
'#editButton': {
click: function(){
me.someFunction();
}
}
});
},
That app variable is the same as the "var Application = {}" that's in the chosen answer for the question -- meaning I didn't need to add it globally (or at all). I must've tried a million different things, but this finally worked. Hope it saves someone else.
Don't need to call init() manually. Just call Ext.create and constructor will be called automatically.

How to use an external jquery plugin with Script#?

How can I use an external jquery plugin with Script# 0.7? Is there a tool to convert any jquery plugin to equivalent c# code? Or we have to do it manually?
Depending on your exact code, the following might also be appropriate:
jQuery.Select("#myDiv").Plugin<jQueryWithFoo>().FooInit();
This is useful if you have multiple plugins you want to use, and use the fluent-API pattern that you would in regular jQuery. Example:
jQuery.Select("#myDiv").
Plugin<jQueryFoo>().FooInit().
Plugin<jQueryBar>().SomeBarMethod();
In my opinion it's usually a better use of one's time to include the plugin as-is (in it's JavaScript form), and then prepare an imported type in Script# for exposing the plugin's functionality to the rest of Script#.
I don't know if there is a shortcut approach in Script# when dealing specifically with jQuery plugins, but what I've quickly done in the past is something like the following:
// Import my plugin "Foo"
[Imported]
[IgnoreNamespace]
public class jQueryWithFoo : jQueryObject
{
private jQueryWithFoo () { }
[ScriptName("foo")]
public void FooInit() { }
[ScriptName("foo")]
public void FooMethod(string method) { }
[ScriptName("foo")]
public void FooMethodWithOptions(string method, Dictionary options) { }
}
Then to use the plugin on an object you just cast to your imported type:
// grab my div and cast to my plugin type
jQueryWithFoo myDiv = (jQueryWithFoo)jQuery.Select("#myDiv");
// use the plugin
myDiv.FooInit();
myDiv.FooMethod("toggle");

Resources