jQuery插件和Polymer元素

12

我尝试将一些jQuery插件包装在Polymer元素中,但目前还没有太大的成功。例如,select2插件(这里讨论的问题)和在 这里 找到的DataTables插件。虽然不依赖于jQuery会很好,但就已经准备好使用的jQuery插件而言,其情况非常成熟,直到 Web Components 库赶上为止,有包装器将Web组件的所有优点带入jQuery插件库。

我的问题是,在 Polymer 元素中使用 jQuery 时是否存在任何需要考虑的关键问题?更有用的是,有哪些成功包装jQuery插件的 Polymer 元素的良好示例?我搜索了这样的示例,但至今发现甚少。

1个回答

21
我的问题是,在 Polymer 元素中使用 jQuery 时,是否有任何需要考虑的关键问题?
可能最大的问题将围绕 Shadow DOM。当您将标记放置在 Shadow DOM 中时,它无法被 jQuery 选择。许多插件假定其所有内容都可在 Light DOM 中使用,因此可能会导致各种问题。希望 jQuery 的新版本能够找到与 Shadow DOM 协同工作的方法,这样可能会减少这个问题。
还有更有用的是,有没有成功包装 jQuery 插件的 Polymer 元素的好例子?
如果您真的想使用 jQuery 插件并且 Polymer 元素,则最好在 Light DOM 中构建您的 jQuery 插件,然后将其作为 <content> 传递到您的元素中。这里是一个 jsbin 示例,它构建了一个 Select2 元素并将其传递到 Polymer 元素中以便显示。

1
感谢@robdodson,这个解释让我很有道理。我有一种直觉,认为Shadow DOM可能是我遇到的问题的根源。我猜这意味着在Web组件中封装jQuery插件不会轻松获胜。也感谢jsbin示例。很高兴看到它工作,但如果插件需要作为内容注入,除非我漏掉了什么,否则将其包装在Web组件中没有太多优势。正是通过Shadow DOM进行范围封装的东西,也是我希望它能够工作的原因! - ivelander
1
我还想指出,对于遇到类似问题的人,可以参考这个相关的帖子 - ivelander
1
这个 lightdom 的例子完全违背了 Web 组件自包含和模块化的初衷。 - ThomasReggi
2
这取决于插件的功能,但我倾向于同意。当试图将从未设计或意图与Web组件一起使用的东西结合在一起时,这只是一个固有的问题。事情必须改变。我想有很多jQuery插件可以重写为Web组件。是的,这需要时间投资,但它是值得的。 - robdodson
@robdodson 你所有的链接,如http://www.polymer-project.org/components/polymer/polymer.html都失效了! - S. Ali Mihandoost

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接