2015-10-13 15 views
6

Ich versuche, einen Wrapper um Handsontable zu erstellen, um einige zusätzliche Funktionen bereitzustellen. Ich habe versucht, Folgendes zu tun, und obwohl der Konstruktor funktioniert, scheint die loadData-Funktion nicht überschrieben zu werden. Irgendein Rat?Erweitern Handsontable

Ich habe dies in Chrome 45.0.2454.101m getestet.

"use strict"; 

class CustomHandsontable extends Handsontable { 

    constructor(container, options) { 
     console.log("in constructor"); 
     super(container, options); 
    } 

    loadData(data) { 
     console.log("load data"); 
     super.loadData(data); 
    } 
} 

EDIT: Nach der Lektüre, dass Chrome noch nicht vollständig ECMA6 unterstützen, habe ich folgendes probiert, aber nicht ganz herausfinden, wie die übergeordnete Methode loaddata nennen.

function CustomHandsontable (container, options) { 
    console.log("constructor"); 

    this.loadData = function(data) { 
     console.log("loadData"); 
     // TODO how do you call the parent load data function? 
    } 
}; 

CustomHandsontable.prototype = Object.create(Handsontable.prototype); 
CustomHandsontable.prototype.constructor = CustomHandsontable; 

EDIT: Nach @ZekeDroids Spitze Babel zu verwenden, erhalte ich die folgende Fehlermeldung, wenn sein Versuch, die Superklassen loaddata-Funktion aufzurufen:

Uncaught TypeError: Cannot read property 'call' of undefined 

Babel code:

"use strict"; 

var _createClass = (function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 

var Hot = (function (_Handsontable) { 
    _inherits(Hot, _Handsontable); 

    function Hot(localOptions, container, options) { 
     _classCallCheck(this, Hot); 

     console.log("in constructor"); 
     _get(Object.getPrototypeOf(Hot.prototype), "constructor", this).call(this, container, options); 
    } 

    _createClass(Hot, [{ 
     key: "loadData", 
     value: function loadData(data) { 
      console.log("load data"); 
      _get(Object.getPrototypeOf(Hot.prototype), "loadData", this).call(this, data); 
     } 
    }]); 

    return Hot; 
})(Handsontable); 
+0

Haben Sie versucht, mit Babel, um Ihre ES6-Code in ES5 zu transpilieren? Es ist heutzutage eine ziemlich normale Art, Code zu schreiben. Es wäre ratsam, da Handsontable bereits die Codierungskonventionen ES6 und ES7 übernommen hat. – ZekeDroid

+0

@ZekeDroid: Danke für den Tipp auf Babel. Ich habe es ausprobiert, bekomme aber einen Fehler (siehe meinen aktualisierten Beitrag). –

+0

Ja, ich bin mir nicht sicher, was ich davon halten soll. Nur neugierig, müssen Sie wirklich Handsontable erweitern? Sie können ihre Dokumentation zum Erstellen benutzerdefinierter Builds lesen. Ansonsten habe ich festgestellt, dass es fast keine Fälle gibt, in denen normale Datenmanipulationen und JS ihren Zweck nicht erfüllen – ZekeDroid

Antwort

2

Answering meine eigene Frage ...

Ich konnte nicht erbschaft t bekommen o Arbeit, aber fand eine Lösung mit der Zusammensetzung:

function Hot(container, options, customOptions) { 
    var _instance = this; 

    // create a hot instance 
    var hot = new Handsontable(container, options); 
    hot._hotContainer = this; 

    // 
    // put any custom stuff here... 
    // 

    // 
    // since inheritance doesn't quite work, the following are all pass-through 
    // functions to cover the fact that composition is being used 
    // 

    this.loadData = function(data) { 
     hot.loadData.apply(this, arguments); 
    } 
    this.render = function() { 
     hot.render.apply(this, arguments); 
    } 
    this.getDataAtRow = function() { 
     return hot.getDataAtRow.apply(this, arguments); 
    } 
    this.countCols = function() { 
     return hot.countCols.apply(this, arguments); 
    } 
    this.sort = function() { 
     hot.sort.apply(this, arguments); 
    } 
}; 
Verwandte Themen