Question

我是 MarkoJS 技术的初学者。我期待通过MarkoJS创建一个轮播（slider with multiple items）组件。我面临的问题是load external libraries（如Jquery）进入MarkoJS。找不到任何方法来加载外部库并通过marko使用它们。

我希望与MarkoJS集成的库是 jquery and slick (carousel) 。如果有人可以建议我将一个外部 JS / Jquery 代码加载到MarkoJS中，我将不胜感激。所以，我可以轻松操纵DOM。

通过MarkoJS我想找的是DOM manipulation以及如何使用selectors in MarkoJS？

已尝试过一些可能性：

虽然，我在这里没有使用任何图书馆。我能够通过CSS建立一个我不想要的旋转木马滑块。
其次，尝试构建一个逻辑来通过Marko本身实现滑块。但是，在选择DOM elements时会再次遇到困难。

Answer 1

使用现有的jQuery插件对Marko来说相当轻松。在光滑的情况下，它可以在npm上使用，因此您可以在模板中import并将其附加到您的组件的根元素：

import Slick from 'slick-carousel`;

class {
  onMount() {
    this.slick = new Slick(this.el);
  }
}

<div>
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

您还需要确保已经设置了模块捆绑器以将您的依赖项设置为浏览器。以下是使用Marko的webpack和lasso的一些示例。您还可以使用已设置了捆绑包的starter project。

Answer 2

但如果确实需要集成jquery，有一些方法可以做到这一点：

import $ from 'jquery'

class {
  onMount() {
    $('.myElement', this.el).hide();
  }
}

<div>
  <div.myElement></div>
</div>

如何集成外部库（光滑）并将其用于MarkoJS？

2 个答案: