在聚合物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/

我有与Bootstrap工具提示类似的问题，如果它们与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.

有另一种方式我应该调用datepicker吗？我试过直接引用， $（＃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).

日期戳定位代码被写入以忽略包含的元素。 < input> 目前不被包含，所以定位代码中止。

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的解决方案，包含代码：

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

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