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不在DOM中，它只在元素的 shadow DOM 中。您可以使用标准CSS选择器或Polymer $映射来获取元素，然后将其转换为jQuery对象：

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

您需要使用Polymer方法来访问this变量。您应该将代码移动到domReady方法。

可能有一个jQuery语法也可以使用shadow DOM中的选择器（比如$（this.shadowDOM）.find（'＃trumbowyg-demo'）），但我不知道确切的语法。 / p>

Answer 2

我得到了这样的工作：

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

Answer 3

$('#trumbowyg-demo').trumbowyg()您需要#选择id。

Polymer和Jquery选择器

3 个答案: