jquery - Polymer 和 Jquery 选择器

Question

我有以下使用 Polymer 的代码:

<polymer-element name="new-post-page">
    <template>
        <div id="trumbowyg-demo"></div>
    </template>
    <script>
        Polymer("new-post-page", 
        {
        });
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>window.jQuery</script>
    <script src="../../bower_components/trumbowyg/dist/trumbowyg.min.js"></script>
    <script>$('#trumbowyg-demo').trumbowyg();</script>
</polymer-element>

如您所见，我使用 Jquery 选择器来显示所见即所得编辑器。不幸的是它没有发生任何事情。它在 polymer 元素定义之外工作，这就是为什么我认为这与该问题有关。

如何解决这个问题？

Answer 1

trumbowyg-demo 不在 DOM 内部，它仅位于元素的 shadow DOM 内部。您可以使用标准 CSS 选择器或 Polymer $ 映射来获取元素，然后将其转换为 jQuery 对象:

$(this.$.trumbowyg-demo).trumbowyg()

您需要在 Polymer 方法中才能访问 this 变量。您应该将代码移至 domReady 方法。

可能有一个 jQuery 语法可以使用影子 DOM 中的选择器(类似于 $(this.shadowDOM).find('#trumbowyg-demo'))，但我不知道确切的语法。