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进行硬管理。错误的原因似乎是 - 显然 - 物化js没有正确加载。如果不知道您正在使用的捆绑器或启动项目类型的具体情况，以及它的设置方式，这很难给出答案。

但是，对您有利的是，有一个名为Aurelia Materialize Bridge的官方支持项目，它是Materialure.css库的Aurelia特定包装。

开始使用：

删除您手动添加的有关物化大小的所有内容
浏览installation instructions
最后，看看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的语法。

希望这可以帮助你。

Aurelia初始化实现组件

1 个答案: