How to embed the handsontable widget into a polyme

问题:

I try to embed the jquery based handsonetable (http://handsontable.com) ui widget into a polymer-dart webcomponent.

The Webcomponent is defined like that:

<polymer-element name="my-table">
  <template>
    <div  id="table"></div>
  </template>

  <script type="application/dart" src="t.dart"></script>
</polymer-element>

The t.dart:

import 'package:polymer/polymer.dart';
import 'dart:js';

var data = [
            ["", "VW", "BMW", "Mercedes", "Mini", "Mitsubishi"],
            ["2012", 2, 2422, 5399, 776, 4151]        
           ];


@CustomTag('my-table')
class MyTable extends PolymerElement 
{ MyTable.created() : super.created() 
  { final element = shadowRoot.querySelector("#table");
    context.callMethod(r'$', [element])
      .callMethod( 'handsontable', [new JsObject.jsify({'data': data,
         'minSpareRows': 1,
         'colHeaders': true,
         'contextMenu': true})]);       

  }
}

I get no error, but the component isn´t initialized. If I try in the main.dart, it works fine.

The approach works for the jquery-ui widget "datepicker" How to embed a jquery ui widget into a polymer-dart webcomponent

回答1:

It doesn't look related to dart-to-js interop.

I can make the example provided on the home of http://handsontable.com/ work with dart:js but not inside a polymer element. I suspect that handsontable does not work very well with shadowDOM.