Fundament 6 - Ostrzeżenie konsoli: Próbowałem zainicjować magellan (dowolną wtyczkę JS) na elemencie, który ma już wtyczkę Foundation

Question

Zainstalowałem Foundation 6 przy użyciu bower. Ciągle otrzymuję wiele warning w konsoli za każdym razem, gdy używam dowolnego Foundation 6 - JavaScript based plugin.

Dokładne ostrzeżenie:

Próbowałem zainicjować Magellan na element, który ma już wtyczkę Foundation.

Mój skrypt zawiera wyglądać następująco:

<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/what-input/what-input.js"></script> 
<script src="bower_components/foundation-sites/dist/foundation.js"></script> 
<script src="js/app.js"></script> 
<script type="text/javascript"> 
     $(document).foundation(); 
</script> 

Ostrzeżenie jest wyzwalane przez kod następującym Obecnie w foundation.js na linii 180:

// For each plugin found, initialize it 
    $elem.each(function() { 
     var $el = $(this), 
      opts = {}; 
     // Don't double-dip on plugins 
     if ($el.data('zfPlugin')) { 
     console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin."); 
     return; 
     } 

próbowałem re-installing od zera, ale nadal nie działa. Podobne pytanie istnieje na Forum Fundacji Zurb, ale do tej pory nie ma dobrej odpowiedzi.

Jak rozwiązać ten problem?

Answer 1

Chociaż wspomniałem odpowiedź z powrotem w numerze comments pytania, czułem, że lepiej będzie napisać to z kilkoma dodatkowymi punktami.

Podczas instalacji Zurb Foundation 6 użyciu bower (wiersz poleceń), to daje piękny index.html stronę, aby zacząć który posiada znacznik <script> że odnosi się do pliku external js znajduje się root\js\app.js. Plik app.js domyślnie ma następujący kod:

$(document).foundation(); //invoke all jQuery based Foundation elements 

Więc w zasadzie, masz już wszystko, aby zacząć.

Ale to nie było tak, jak działało, dopóki Fundacja 6 i ja nie zdawały sobie sprawy z tych zmian. Nie przejrzałem zawartości app.js, ponieważ zakładałem, że jest to puste. Po prostu zrobił stary sposób powoływania ich w moich html stron pisząc poniższy kod:

<script type="text/javascript"> 
    $(document).foundation(); 
</script> 

Ten rodzaj podwójnym mowa jQuery oparte elementy Fundacji podnoszenie warning na konsoli przeglądarki.

Rozwiązanie było usunięcie jednego z wezwaniem, ale faktycznie usuwając kod napisany w external js pliku większy sens dla następujących powodów:

1. odnośniki zewnętrzne kosztować dodatkowe http prośbę, bardzo nieznacznie zwiększenie cennego czasu ładowania strony. Dlaczego nie zmniejszyć, jeśli możesz.
2. Wywoływanie elementów opartych na jQuery na stronie musi odbywać się tak wcześnie, jak to możliwe, aby każdy element uzyskał oryginalny kształt w mgnieniu oka. Dlatego lepiej jest wspomnieć o wywołaniu na stronie html niż poprosić o zewnętrzny plik do wywołania.

Więc usunąć kod wymieniony w pliku js zewnętrznych, że jest to plik app.js. Ostrzeżenia znikną.