在 Polymer 1.x 元素中包装 jQuery 插件

Question

I am trying to move all the necessary jQuery code from inside the <script> tag here to inside the Polymer <dom-module>.

当我取消注释里面的代码<dom-module>和注释掉 <script> 标签内的代码，我希望滑块能够像开始时一样正常显示和运行——类似于下图。相反，浏览器呈现一个普通的输入元素——而不是一个滑块。

Here is the jsBin.

请提供正确的代码以获得所需的结果。

http://jsbin.com/ceripuviwu/1/edit?html,输出

<!doctype html>

<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
  <link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
  <link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
</head>

<body>
  <dom-module id="x-element">
    <template>
      <style>
      /** /
      References:
      http://jsfiddle.net/IonDen/qv6yrjrv/
      https://github.com/IonDen/ion.rangeSlider#experiments-playground
      /**/
      </style>
      <input type="text" class="js-range-slider" id="slider" value="" />
    </template>
    <script>
      (function() {
        Polymer({
          is: "x-element"
          /** /
          Does not work. Want to cut and paste below <script> to move it here.
          /** /
          ,
          ready: function(){
            this.$.slider.ionRangeSlider({
              type: "double",
              min: 100,
              max: 1000,
              from: 300,
              to: 800
            });
          }
          /**/
        });
      })();
    </script>
  </dom-module>
  <x-element></x-element>
  <script>
    /** /
    This works. Want to cut and paste to move it above, inside the <dom-module>
    /**/
    $(".js-range-slider").ionRangeSlider({
      type: "double",
      min: 100,
      max: 1000,
      from: 300,
      to: 800
    });
    /**/
  </script>
</body>

Answer 1

在下面的代码行中，您试图调用 HTMLElement 上的 jQuery 插件定义的函数。

this.$.slider.ionRangeSlider(

但是，该函数在那里未定义。你首先需要用 jQuery 包裹它。那就是你正在做的事情。注意 $().

$(".js-range-slider").ionRangeSlider({

因此将第一行更改为

$(this.$.slider).ionRangeSlider({

Here's jsBin.

在 Polymer 1.x 元素中包装 jQuery 插件

Wrapping a jQuery plugin inside a Polymer 1.x element

javascript

jquery

polymer

polymer-1.0