Aurelia初始化实现组件

Question

我想使用materialize-css与Aurelia框架，到目前为止，我已经能够同时安装jQuery和materialize-css（显然）成功。它们的输入显示在typings.json，package.json和config.js上。然而，当我执行Materialise的初始化函数，如

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

我得到浏览器的控制台上出现以下错误：

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

如果我跑这来代替：

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

然后什么发生。我究竟做错了什么？

Answer 1

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

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

要开始：

1. 删除您手动新增的一切，关于兑现通过installation instructions
2. 最后的lib
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的语法。

希望这可以帮助你。