如何将 jquery ui 小部件嵌入到聚合物飞镖 Web 组件中

Question

我尝试嵌入一个 jquery ui 小部件，f.e.将日期选择器添加到聚合物飞镖 Web 组件中。

Webcomponent 是这样定义的：

<polymer-element name="my-datepicker">
    <template>
        <div id="datepicker"></div>
    </template>
    <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

这个小部件的初始化是在JS中完成的

<script>
    $(function() 
    { $( "#datepicker" ).datepicker();});
</script>

如何在我的 polymer.dart webcomponent 中的 dart 中初始化该小部件。

我尝试使用 'dart:js' 调用该方法，但我无法使用 dart:js 访问 shadow dom。

有

shadowRoot.querySelector("#datepicker")

我可以访问 shadow-dom，但是我如何调用 JS 方法 - datepicker() - 在上面

Answer 1

您可以将元素传递给 jQuery 而不是选择器。所以下面的代码应该可以工作：

final element = $['datepicker'];
js.context.callMethod(r'$', [element]).callMethod('datepicker');

Answer 2

只需在元素上调用 JQuery，然后调用 datepicker()。 dart js 包使其易于阅读：

import 'package:js/js.dart';

var element = shadowRoot.querySelector("#datepicker");
var $ = context.global[r'$'];
$(element).datepicker();