Aurelia初始化物化组件

Question

我正在尝试在Aurelia框架中使用materialize-css，到目前为止，我已经成功地安装了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的包装器。

要开始：

删除您手动添加的所有内容，关于materialize库

• 演练the installation instructions

• Finally，how a look 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的语法。

希望这能帮到你。