在 Polymer Web 组件中绑定 JQueryUI DatePicker

Question

我正在努力让 jquery datepicker 在自定义聚合物元素中工作。它似乎绑定到 body 而不是元素本身，例如：

<polymer-element
  name="test-datepicker">
  <template>
      <p>Date: <input type="text" id="dp"></p>
  </template>
</polymer-element>

有定义：

Polymer('test-datepicker', {

    ready: function() {
        $(this.$.dp).datepicker();
    },
});

... 导致弹出日历显示在页面顶部，而不是像其他情况那样显示在输入下方，正如您在 jsbin 的运行示例中所见：http://jsbin.com/saqojihi/1/

如果引导工具提示与 Web 组件的边缘重叠，我会遇到类似的问题，但我希望这两者是相关的。

还有其他我应该调用日期选择器的方法吗？我尝试过直接引用$("#id").datepicker()，但正如another ticket 中所说，jquery“不知道 ShadowDOM”。我也尝试过使用 lightdom 属性，但无济于事。

我希望有人在这方面取得了成功。

编辑：2014 年 4 月 4 日

感谢@Scott Miles 的建议，我添加了JQuery.contains 的以下覆盖，但这可能仍然不是理想的解决方案：

$(function(){
  // Store a reference to the original contains method.
  var originalContains = jQuery.contains;
  jQuery.contains = function(parent, child){
      var re = /datepicker|dp/i;
      if(child.className.match(re)) {
        return true;
      }
      // Execute the original method.
      return originalContains.apply( this, arguments );
  }
});

It works 现在，但我必须看看它在更完整的应用程序中的表现如何。

Answer 1

在这种特殊情况下，问题归结为 document.contains 在 ShadowDOM (https://www.w3.org/Bugs/Public/show_bug.cgi?id=22141) 中返回 wrt 元素的概念。

datepicker 定位代码被编写为忽略文档中没有包含的元素。 <input> 当前未被视为包含，因此定位代码中止。

我可以通过简单地删除 JQuery 的 contains 代码来破解一个解决方案，如下所示：

$(function() {
  jQuery.contains = function() {
    return true;
  };
 });

这显然是一个变通（坏）的解决方案，但它使 JsBin 现在可以工作。

http://jsbin.com/saqojihi/8/edit