Mit ZURB Foundation 6 Javascript mit jspm

Question

Ich habe ein es6 Modul wie folgt definiert:

import 'zurb/foundation/js/foundation.core'; 
import 'zurb/foundation/js/foundation.util.mediaQuery'; 
import 'zurb/foundation/js/foundation.dropdown'; 
import 'zurb/foundation/js/foundation.reveal'; 
import 'zurb/foundation/js/foundation.tabs'; 
import modalFactory from './modal'; 
import revealCloseFactory from './reveal-close'; 

export default function ($element) { 
    debugger; 
    $element.foundation(); 
} 

Wie Sie sehen können, ein Haltepunkt dort nach oben hin von der Standard-Exportfunktion ist.

Ich benutze dieses Modul dann in einer Datei wie folgt aus:

import $ from 'jquery'; 
import foundation from './global/foundation'; 

export default class Global extends PageManager { 
    loaded(next) { 
     foundation($(document)); 
     next(); 
    } 
} 

Wenn dies ausgeführt wird, erhalte ich eine Fehlermeldung, dass $element.foundation keine Funktion ist. Mit der Anweisung debugger kann ich den aktuellen Bereich überprüfen, wenn die Ausführung angehalten wird. Ich kann bestätigen, dass $element keine foundation() Methode hat. Ich bin mir nicht sicher, warum dies der Fall ist, da Foundation am Anfang der Datei importiert wurde.

Auch wenn die Ausführung pausiert, auf der js-Konsole, wenn ich tun $(document).foundation(), funktioniert es, und Stiftung ist in der Tat eine Funktion. Außerdem gibt $element.is($(document))true zurück.

Warum sollte die Methode foundation unter $(document) und nicht $element verfügbar sein? Wenn ich die Zeile von foundation($(document)) zu foundation(jQuery(document)) ändere, funktioniert es auch. Ich kann auch sehen, dass $.fn.foundation nicht existiert, aber jQuery.fn.foundation tut, wenn ich einen Haltepunkt direkt vor dieser Zeile setzen.

Was geht hier vor?

Answer 1

Der Grund ist höchstwahrscheinlich die Tatsache, dass der Code, der das jQuery-Objekt generiert keine Foundation importiert, daher ist die foundation-Funktion nicht Teil des Prototyps, wenn das Objekt erstellt wird.

Fügen Sie den Basisimport dem Code hinzu, der das Objekt erstellt.