如何将可动手操作的小部件嵌入到聚合物飞镖 Web 组件中

Question

我尝试将基于 jquery 的 handonetable (http://handsontable.com) ui 小部件嵌入到聚合物飞镖 Web 组件中。

Webcomponent 是这样定义的：

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

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

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})]);       

  }
}

我没有收到任何错误，但组件未初始化。 如果我在 main.dart 中尝试，它工作正常。

该方法适用于 jquery-ui 小部件“datepicker”How to embed a jquery ui widget into a polymer-dart webcomponent

Answer 1

它看起来与 dart-to-js 互操作无关。

我可以使http://handsontable.com/ 主页上提供的示例与 dart:js 一起使用，但不能在聚合物元素中使用。我怀疑handsontable 不适用于shadowDOM。