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.
Для начала:
- Удалите все, что вы добавили вручную, в отношении материализации lib
- Пройдите инструкции по установке
- Наконец, посмотрите на образцы, чтобы увидеть, как вы начинаете
В вашем примере настроить базовый слайдер так же просто, как, например:
<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-подобный синтаксис.
Надеюсь, что это помогает вам.