1

I'm trying to use materialize-css with the Aurelia framework, and so far I have been able to install both jQuery and materialize-css (apparently) successfully. Their imports appear on the typings.json, package.json and config.js. However, when I execute a materialize initializing function such as

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

I get the following error on the browser's console:

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

If I run this instead:

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

Then nothing happens. What am I doing wrong?

fpluis
  • 189
  • 1
  • 13

1 Answers1

0

It looks like you're focussing too much on doing the hard plumbing with jQuery yourself. The reason for the error appears to be that -obviously- Materialize js isn't properly loaded. Without knowing the specifics on the bundler or startup project type you're using, and how it's setup, this is hard to give an answer to.

However, what might benefit you is that there is an officially supported project called the Aurelia Materialize Bridge, which is an Aurelia-specific wrapper for the Materialize.css library.

To get started:

  1. Remove everything you've manually added, regarding the materialize lib
  2. Walk through the installation instructions
  3. Finally, have a look at the samples to see how you get things started

In your example, setting up the basic slider is as easy as for example:

<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>

As a rule of thumb; you shouldn't have to use any jQuery-like syntax at all.

Hope this helps you out.

Juliën
  • 9,047
  • 7
  • 49
  • 80
  • If you take a look at this question: http://stackoverflow.com/questions/38372027/using-materialize-in-aurelia/38381018#38381018, you will see I already tried that approach, but was unable to get it running. PS: I'm using aurelia's typescript skeleton. – fpluis Jul 22 '16 at 12:00
  • @Thelightbringer If you're still struggling with this, try the current bridge version. We've should have your errors from http://stackoverflow.com/questions/38372027/using-materialize-in-aurelia/38381018#38381018 covered by now.. :) – Daniel Oct 13 '16 at 20:06