ES6 Classes lose functions when converted to observables.

3 posts, 0 answers
  1. Christopher
    Christopher avatar
    42 posts
    Member since:
    Jan 2017

    Posted 15 Mar Link to this post

    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...

     

  2. Plamen
    Admin
    Plamen avatar
    2914 posts

    Posted 19 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Juuso
    Juuso avatar
    1 posts
    Member since:
    Sep 2018

    Posted 18 Sep Link to this post

    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.

Back to Top