模板中带有 JS 的 Polymer Dart（使用第三方库）

Question

我想将组件库（Kendo UI）与 Polymer 和 Dart 一起使用，并在 HTML 模板文件中以纯 JS 形式保留尽可能多的组件初始化。 （Kendo 库没有 Dart 绑定，我不想开辟这条道路……）现在，使用这些组件需要运行一些 JavaScript 来初始化 div。我遇到的困难是让脚本标签能够看到影子 DOM 中的元素并在聚合物初始化后在适当的时间运行。

通过在 Dart Polymer 类的 ready() 函数中获取 div 并使用 JS 上下文回调到我的模板以在那里运行 JS 函数，将 div 传回给它，我找到了一个有点合理的解决方案。例如

例如在一个自定义标签的模板文件中，我有：

<script type='text/javascript'>
    function initKendo(panel) {
        $(panel).kendoPanelBar({
            expandMode: 'multi'
        });
    }
</script>

我用 Dart 来称呼它：

ready(){    
    js.context.initKendo( $['myPanel'] );
}

这确实有效，但感觉就像是一个黑客，我担心我可能会遇到什么问题。

我的问题是：

1. 是否有更直接的方法可以在 HTML 模板文件的脚本标记中完成此操作（无需回调）。我已经尝试注册 Polymer.ready() 并使用 shadowDom 获取来查询我的 div，它有点尝试工作，但由于某种原因我的所有样式都丢失了......而且我担心混合普通的 Polymer 和 Dart聚合物可能不好。

2. 这种通用方法可行吗？我可以放入 Polymer 模板文件的内容有哪些限制，第三方库无法很好地处理 shadow dom 可能会遇到哪些问题？到目前为止，如果我只是在模板文件的顶部导入它（例如库和样式），那么简单的东西似乎就可以工作。

3. 如果我现在想将第三方库与 Dart 一起用于控制器逻辑，我还有哪些其他选择？如果不是 Polymer，我应该如何分解我的 HTML？

Answer 1

1) 你应该能够从 Dart 调用 jQuery 而无需创建 JS 函数How to call a jQuery function from Dart?

当您使用 JavaScript 访问 shadowDOM 时，您的样式会丢失，这很奇怪。你能提供一些你是怎么做的代码吗？

2) 不支持 shadowDOM 的全局样式会带来一些麻烦。使用 Bootstrap，它通常有助于链接每个 Polymer 元素内的样式文件。 当样式或 JavaScript 必须在元素内跨越阴影边界时，这将不起作用（当您有某种后代选择器，其中祖先位于 shadowDOM 之外而后代位于其内部时）

3) 我想最好的选择是使用 Angular.dart。 Angular.dart 支持没有 shadowDOM 的组件