dart - 模板中带有 JS 的 Polymer Dart(使用第三方库)

Question

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

通过在 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'] );
}

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

我的问题是:

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

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

如果此时我想将第三方库与 Dart 一起用于 Controller 逻辑，我还有哪些其他选择？如果不是 Polymer，我应该如何分解我的 HTML？

Answer 1

1) 你应该能够在不创建 JS 函数 How to call a jQuery function from Dart? 的情况下从 Dart 调用 jQuery

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

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

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