在 Polymer Web 组件中绑定 JQueryUI DatePicker

我正在努力让 jquery 日期选择器在自定义聚合物元素中工作。它似乎绑定到主体而不是元素本身，例如：

<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/ http://jsbin.com/saqojihi/1/

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

我是否应该调用日期选择器的另一种方式？我试过直接引用，$("#id").datepicker()，但正如它所说另一张票 https://stackoverflow.com/questions/18351618/bootstrap-js-not-working-in-polymer-components，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 http://jsbin.com/saqojihi/10现在，但我必须看看它如何在更完整的应用程序中发挥作用。

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

datepicker定位代码是为了忽略不忽略的元素而编写的包含通过文件。这<input>当前不被视为包含，因此定位代码中止。

我能够通过简单地删除 JQuery 来破解解决方案contains像这样的代码：

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

这显然是一个变通的（糟糕的）解决方案，但它使 JsBin 目前可以工作。

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