在聚合物自定义元素中使用 Kendo 组件

Question

我正在研究如何为 Kendo UI 组件（例如网格）添加抽象层。

我正在探索的一个途径是将剑道组件包裹在一个自定义的 Polymer 元素中；请注意，Polymer 元素可能包含比剑道组件更多的元素。

这是我为实现此目的而进行的众多尝试之一：

<polymer-element name="kendo-test" attributes="data">
<template>
    <div id="grid"></div>
</template>
<script>
    Polymer({
        data: [],

        ready: function () {

            var element = $("#grid").kendoGrid({
                dataSource: this.data,
                ...
            });

        }
    });
</script>

脚本块运行正常，但网格元素没有被渲染（在影子 DOM 中或其他地方）。元素变量的内容表明剑道已经做到了。

我还尝试在模板中嵌入一个脚本标签，以便 Kendo 在渲染后执行，但是我无法绑定我的数据属性。

有谁知道如何成功地将 Kendo UI（或任何其他 DOM 操作 3rd 方包）包裹在聚合物元素中？

谢谢

Answer 1

感谢answer，我发现如果您使用 Polymer 引用而不是元素 ID，则可以引用 shadow DOM 元素：

var element = $(this.$.grid).kendoGrid({