将聚合物与外部 js 文件一起使用

Question

我想在我的聚合物元素中使用 trumbowyg.js，它包括 jquery.js 和 trumbowyg.js。它在 Firefox 中运行良好，但在 chrome 中却不行。

报错，可能是因为阴影dom lookup/separation in chrome。错误发生在 trumbowyg.js 使用 "this" 的地方。

这里出了什么问题？我应该怎么做？

我正在使用 Polymer 2.0

错误：

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at trumbowyg.js:1544

我的-notes.html

 <link rel="import" href="../polymer/polymer-element.html">
    <link rel="import" href="../bower_components/trumbowyg/trumbowyg.html">

    <dom-module id="my-notes">
    <template>

    <link rel="stylesheet" href="../bower_components/trumbowyg/dist/ui/trumbowyg.min.css">
  <firebase-auth user="{{user}}" signed-in="{{signedIn}}"></firebase-auth>
          <div class="card">
              <div id="trumbowygd">hello</div>
          </div>

         </template>
         <script>
    class MyNotes extends Polymer.Element {

      static get is() { return 'my-notes'; }
static get properties() {
        return {

          user: {
            type: Object,
            observer: '_shownotearea'
          },
        };
      }


      _shownotearea(){
        var myFineElement = this.$.trumbowygd;
        myFineElement.innerHTML="hello nice meeting you";
                 $(myFineElement).trumbowyg({});

      }
</script>

    </dom-module>

trumbowyg.html

<script src="../jquery/dist/jquery.min.js"></script>
<script src="dist/trumbowyg.js"></script>

这似乎不起作用 jQuery plugins and Polymer elements

Answer 1

简短的回答是这个插件可能不适用于本机 Shadow DOM。

trumbowyg 可能正在尝试查询文档以查找某些元素。 Shadow DOM 创建标记封装，因此您不能使用 $() 或 document.querySelector 来查找 shadow 根内部的内容。出于这个原因，通常我建议不要在 Shadow DOM 中使用 jQuery 插件。

将聚合物与外部 js 文件一起使用

Using polymer with external js files

polymer

polymer-2.x

trumbowyg