ES6 Classes lose functions when converted to observables.

[Christopher]

When converting an instance of an ES6 class to an observable, the observable won't contain the functions of the class (maybe because they're under the prototype technically?) Any way to resolve this or do I have to hack something together?

HTML

<input data-bind="value: selected.name" />
<button data-bind="click: add">Add Role</button>

 

Sample model

import UserGroup from './user-group.js';

export default class UserGroupModel {
    constructor () {

        this.selected = new UserGroup();

        this.data = [];
    }

    add() {
        console.log('wont see me...');
    }
}

 

Convert:

let vm = new kendo.observable(new UserGroupModel());
kendo.bind($(document.body), vm);

 

No function when clicking the button

Uncaught TypeError: ((n.event.special[g.origType] || {}).handle || g.handler).apply is not a function
    at HTMLButtonElement.dispatch (jquery.min.js:3)
    at HTMLButtonElement.r.handle (jquery.min.js:3)

 

Now put the function in the constructor:

import UserGroup from './user-group.js';

export default class UserGroupModel {
    constructor () {

        this.selected = new UserGroup();

        this.data = [];

        this.add = function() {
            console.log('WILL see me...');
        }
    }
}

 

Works:

WILL see me...

 

[Plamen]

Hi,

Yes indeed kendo.observable class does not transpile the ES6 classes in any way and in this case only executes the constructor and that is why it is working in the second scenario. 


Regards,
Plamen
Progress Telerik

[Juuso]

If you are using babel you can get ES6 classes to work with kendo by using babel-plugin-transform-es2015-classes plugin with option

loose: true

 

That causes babel to transform ES6 classes so that class methods are found from objects prototype.