Polymer + jquery + slick carousel 不起作用

Question

我在 Polymer 和 jQuery 选择器之间存在概念问题，尤其是 slick.js 插件。

这是一个聚合物元素的定义

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../speech-element/speech-element.html">
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../bower_components/slick/dist/slick.min.js"></script>
<script src="./sequence-speech-questions.js"></script>
<polymer-element name="sequence-speech-questions" attributes="text_list">
<template>
    <link rel="stylesheet" href="sequence-speech-questions.css">
    <div class="single-item">
        <template repeat="{{text in text_list}}">
          <speech-element text="{{text}}"></speech-element>
        </template>
   </div>
</template>
</polymer-element>

这是 sequence-speech-questions.js

Polymer("sequence-speech-questions", {
   // define element prototype here
ready: function () {
    this.text_list = JSON.parse(this.text_list);
},
domReady: function () {
  $('.single-item').slick();
}
});

最后，jquery 选择器不起作用

有人知道如何在聚合物上修复这个 jquery 错误

谢谢大家

Answer 1

在这种情况下，我认为 jquery 不存在于 webcomponent 或聚合物的上下文中。

也许你应该尝试从主页上自己修改jquery，比如：

$(document).on('DOMNodeInserted', '.single-item', function(){$(this).slick();});