Aurelia инициализирует материализованные компоненты

Я пытаюсь использовать 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();

Тогда ничего не происходит. Что я делаю неправильно?

1 ответ

Похоже, вы слишком много внимания уделяете выполнению сложных работ с jQuery самостоятельно. Причина ошибки, по-видимому, заключается в том, что, очевидно, Materialise js загружен неправильно. Без знания специфики используемого вами проекта компоновщика или запуска и того, как он настроен, трудно дать ответ.

Однако что может принести вам пользу, так это то, что существует официально поддерживаемый проект под названием Aurelia Materialize Bridge, который является Aurelia-специфической оболочкой для библиотеки Materialize.css.

Для начала:

  1. Удалите все, что вы добавили вручную, в отношении материализации lib
  2. Пройдите инструкции по установке
  3. Наконец, посмотрите на образцы, чтобы увидеть, как вы начинаете

В вашем примере настроить базовый слайдер так же просто, как, например:

<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-подобный синтаксис.

Надеюсь, что это помогает вам.

Другие вопросы по тегам