2015-10-13 12 views
6

いくつかの追加機能を提供するために、Handsontableの周りにラッパーを作成しようとしています。私は次のことをやってみましたが、コンストラクタは動作しますが、loadData関数はオーバーライドされないようです。何かアドバイス?Handsontableを拡張する

私はこれをChrome 45.0.2454.101mでテストしました。

"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:クロームはまだ完全にはECMA6をサポートしていないことを読んだ後、私は次のことを試してみたが、非常に親loaddataのメソッドを呼び出す方法を見つけ出すことはできません。

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:

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

あなたのES6コードをES5に変換しようとしましたか?今日はコードを書くのはかなり標準的な方法です。 Handsontableは既にES6とES7のコード化コンベンションを採用しているので、それはお勧めです。 – ZekeDroid

+0

@ZekeDroid:バベルのおかげで、ありがとう。私はそれを試しましたが、エラーが発生しました(私の更新された記事を参照)。 –

+0

ええ、私はそれをどうしたらいいのか分かりません。ちょうど興味があります、あなたは本当にHandsontableを拡張する必要がありますか?カスタムビルドの作成方法に関するドキュメントを読むことができます。それ以外の場合は、通常のデータ操作とJSが目的を果たさないケースはほとんどありません – ZekeDroid

答えて

2

留守番先端がバベルを使用するには、次の@ZekeDroidsは、私はそのスーパークラスのloaddataの機能を呼び出そうと次のエラーを取得します私自身の質問...

私は相続財産を得ることができませんでした

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); 
    } 
}; 
関連する問題