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

Question

Я пытаюсь использовать материализацию-css с каркасом Aurelia, и до сих пор я смог успешно установить как 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. Причина ошибки заключается в том, что - очевидно, - Materialize js неправильно загружена. Не зная специфики используемого типа подключаемого или запускаемого проекта, и как он настраивается, это трудно дать ответ.

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

Для начала:

1. Удалить все, что вы вручную добавили, что касается материализации Lib
2. Прогулка через installation instructions
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.

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