Question

我试图将一个伟大的select2 jquery小部件（https://github.com/ivaynberg/select2）包装在Polymer元素中，以便于重用。我能够正确地初始化选择，但在初始化后遇到了问题。具体来说，当单击select以打开它时，在定位弹出窗口时会在select2脚本中抛出类型错误。这是一个失败实施的回购：

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

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

Answer 1

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

Answer 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中。

聚合物select2元素

2 个答案: