Aurelia 初始化物化组件

Question

我正在尝试将 materialize-css 与 Aurelia 框架一起使用，到目前为止，我已经能够成功安装 jQuery 和 materialize-css（显然）。它们的导入出现在 typings.json、package.json 和 config.js 上。但是，当我执行物化初始化函数时，例如

$('.slider').slider();

我在浏览器的控制台上收到以下错误：

ERROR [app-router] TypeError: $(...).slider is not a function

如果我改为运行它：

$('.slider').slider();

然后什么都没有发生。我做错了什么？

Answer 1

看起来您过于专注于自己使用 jQuery 进行硬管道。错误的原因似乎是 - 显然 - Materialize js 没有正确加载。在不知道您正在使用的捆绑程序或启动项目类型的具体细节以及它是如何设置的情况下，这很难给出答案。

但是，您可能受益的是，有一个名为 Aurelia Materialize Bridge 的官方支持项目，它是 Materialize.css 库的特定于 Aurelia 的包装器。

开始：

1. 删除您手动添加的所有关于物化库的内容
2. 浏览installation instructions
3. 最后，看看at the samples，看看你是如何开始的

在您的示例中，设置基本滑块就像示例一样简单：

<template>
  <md-slider>
    <li>
      <img src="http://lorempixel.com/580/250/nature/1" />
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/580/250/nature/2" />
      <div class="caption left-align">
        <h3>Left Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/580/250/nature/3" />
      <div class="caption right-align">
        <h3>Right Aligned Caption</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>
      <img src="http://lorempixel.com/580/250/nature/4" />
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
  </md-slider>
</template>

根据经验；您根本不必使用任何类似 jQuery 的语法。

希望对你有所帮助。