聚合物和 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 选择器来显示 WYSIWYG 编辑器。不幸的是它没有发生任何事情。它在聚合物元素定义之外工作，这就是为什么我认为这与问题有关。

我该如何解决这个问题？

Answer 1

$('#trumbowyg-demo').trumbowyg() 你需要 # 到 select by id.

Answer 2

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

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

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

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

Answer 3

我是这样工作的：

<link rel="import" href="../bower_components/polymer/polymer.html">
<script href="../bower_components/jquery/dist/jquery.js"></script>

<dom-module id="my-red-frame">
    <template>
        <div class="redbox">
            <content></content>
        </div>
    </template>

    <script>
        Polymer({
            is: "my-red-frame",
            ready: function () {
                // Changing background color this way just to provide an example
                $(this).find(".redbox").css("background-color", "red");
            }
        });
    </script>

</dom-module>

聚合物和 Jquery 选择器

Polymer and Jquery selector

jquery

dom

shadow-dom

polymer