在 Polymer Web 组件中绑定 JQueryUI DatePicker [英] Binding JQueryUI DatePicker within a Polymer Web Component

问题描述

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

I am struggling to get a jquery datepicker to work within a custom polymer element. It seems to bind to the body instead of the element itself, for example:

<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/

... results in the pop-up calendar displaying at the top of the page instead of under the input as it would otherwise, as you can see in the running example over at jsbin: http://jsbin.com/saqojihi/1/

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

I'm having similar issues with bootstrap tooltips not displaying if they overlap the edges of a web component, and I'm hoping these two are related.

还有其他方法可以调用日期选择器吗?我试过直接引用，$("#id").datepicker()，但正如 另一张票，jquery不知道ShadowDOM".我也试过使用 lightdom 属性无济于事.

Is there another way that I should be calling the datepicker? I've tried direct references, $("#id").datepicker(), but as it says in another ticket, jquery "doesn't know about ShadowDOM". I've also tried using the lightdom attribute to no avail.

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

I'm hoping someone has had success with this.

4/4/14

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

Thanks to @Scott Miles for the suggestion, I've added the following override of JQuery.contains, but this probably still isn't the ideal solution:

$(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 for now, but I'll have to see how it plays out in a more complete app.

推荐答案

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

In this particular case, the problem boils down to the notion of what document.contains returns wrt elements in ShadowDOM (https://www.w3.org/Bugs/Public/show_bug.cgi?id=22141).

日期选择器定位代码被编写为忽略文档中不包含的元素. 当前不被认为是包含的，因此定位代码中止.

The datepicker positioning code is written to ignore elements not contained by document. The <input> is currently not considered contained, so the positioning code aborts.

我能够通过简单地删除 JQuery 的 contains 代码来破解一个解决方案:

I was able to hack a solution by simply stubbing out JQuery's contains code like this:

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

这显然是一种变通方法(糟糕的)解决方案，但它使 JsBin 现在可以工作.

This is clearly a workaround (bad) solution, but it makes the JsBin work for now.

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

这篇关于在 Polymer Web 组件中绑定 JQueryUI DatePicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！