Полимерный элемент select2

Я пытаюсь обернуть отличный виджет select2 jquery ( https://github.com/ivaynberg/select2) в элемент Polymer для легкого повторного использования. Мне удалось правильно инициализировать select, но у меня возникают проблемы после инициализации. В частности, при нажатии кнопки "Выбрать", чтобы открыть ее, в скрипте select2 возникает ошибка при позиционировании всплывающего окна. Вот репозиторий с ошибочной реализацией:

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

У кого-нибудь получалось успешно интегрировать Polymer с этим виджетом select2 или вообще с jquery? Любые предложения о том, как я мог бы заставить этот пример работать?

Источник

2 ответа

Решение

Обертывание плагинов jQuery в элементе Polymer в настоящее время не работает надежно из-за необходимости доступа jQuery ко всем узлам документа, работающим в границах теневого DOM. Полное объяснение здесь.

Источник

Я столкнулся с той же проблемой. Вы можете создать хак для этого, форсируя шаблон в Light DOM:

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.

Источник
Другие вопросы по тегам