聚合物 select2 元素答案

【问题标题】：Polymer select2 element聚合物 select2 元素
【发布时间】：2014-04-05 22:44:39
【问题描述】：

我正在尝试将出色的 select2 jquery 小部件 (https://github.com/ivaynberg/select2) 包装在 Polymer 元素中以便于重用。我能够正确初始化选择，但在初始化后遇到问题。具体来说，当单击选择以将其打开时，在定位弹出窗口时会在 select2 脚本中引发类型错误。这是一个执行失败的仓库：

https://github.com/ivelander/x-select2

有没有人成功地将 Polymer 与这个 select2 小部件或 jquery 小部件集成在一起？关于如何让这个例子工作的任何建议？

【问题讨论】：

这里的信息 (stackoverflow.com/questions/22824828/…) 有帮助吗？
Scott，它确实看起来确实相关，但是 jQuery.contains 的相同覆盖在这里似乎并不有效。我拼凑了一个类似的 JSBin here。
您是否使用以下修复更新了您的项目？

标签： jquery jquery-select2 polymer

【解决方案1】：

在 Polymer 元素中包装 jQuery 插件目前无法可靠地工作，因为 jQuery 需要访问文档中运行到影子 DOM 边界的所有节点。完整解释here.

【讨论】：

【解决方案2】：

我遇到了同样的问题。您可以通过将模板强制放入 Light DOM 来为此创建一个 hack：

Polymer "my-select",

  ready: () ->
    $(@$.el).select2({
      placeholder: "Foo..."
      data: []
    })
    this

  # Override parseDeclaration to force the template into the Light DOM
  parseDeclaration: (elementElement) ->
    @lightFromTemplate(@fetchTemplate(elementElement))

现在 select2 将能够定位到 select2 容器的正确偏移量。

当然，您必须小心，因为如果您的模板中有任何属于 Shadow DOM 的内容（如样式表），那么它现在将位于 Light DOM 中。

【讨论】：