如何集成外部库 (slick) 并将其用于 MarkoJS？

Question

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

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

我一直在寻找的是 DOM manipulation 通过 MarkoJS 以及如何使用 selectors in MarkoJS ？

已经尝试了一些可能性：

不过，我在这里没有使用任何库。我可以通过 CSS 构建一个旋转木马滑块，但我不想这样做。
其次，尝试构建一个逻辑来通过 Marko 本身实现滑块。但是，在选择DOM elements.

Answer 1

使用现有的 jQuery 插件对于 Marko 来说相当轻松。在 slick 的情况下，它在 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>

您还需要确保已设置模块捆绑器以获取对浏览器的依赖项。下面是一些使用 webpack and lasso with Marko. You can also use the starter project 的示例，其中已经设置了一个捆绑器。

Answer 2

但如果真的需要集成 jquery，有一些方法可以做到：

import $ from 'jquery'

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

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

如何集成外部库 (slick) 并将其用于 MarkoJS？

How to integrate external library (slick) and utilize it into MarkoJS?

jquery

slick.js

marko