聚合物和jQuery選擇

我用聚合物下面的代碼：聚合物和jQuery選擇

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

正如你可以看到我爲了顯示WYSIWYG編輯器使用jQuery選擇。不幸的是它不會發生任何事情。它在聚合物元素定義之外工作，這就是爲什麼我認爲這與問題有關。

我該如何解決這個問題？

來源

2015-05-01 LMF

trumbowyg-demo不在DOM裏面，它只在的影子DOM裏面。您可以使用標準的CSS選擇器或聚合物$地圖，讓您的元素，然後將其轉換爲一個jQuery對象：

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

你需要在聚合物方法來訪問this變量。您應該將代碼移至domReady方法。

可能還有一個jQuery語法可以使用shadow DOM中的選擇器（類似$（this.shadowDOM）.find（'＃trumbowyg-demo'）），但我不知道確切的語法。

來源

2015-05-01 08:17:37 BLASTOR

$('#trumbowyg-demo').trumbowyg()您需要#才能選擇id。

來源

2015-05-01 00:53:44 chiliNUT

你是對的，但卻在我的代碼是正確的。奇怪的複製和粘貼錯誤。 – LMF

我得到它的工作這樣的：

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

來源

2015-09-18 16:26:54

聚合物和jQuery選擇

回答

相關問題