RequireJS eine Funktion von Modul zur Verwendung in Vorlage

Question

Ich möchte eine Funktion in einem Modul erstellen, die mit verschiedenen Abhängigkeiten arbeiten würde aber in der Vorlage aufgerufen, bisher habe ich nur eine Funktion undefined Fehler erhalten. Wo liege ich falsch, oder ist das einfach nicht möglich?

helper.js Modul

define(['aDependency'],function(){ 

    var sayHi = function(){ 
     console.log('Hi'); 
}; 
return{ 
    sayHi: sayHi 
} 

Dieses Modul in meinem Haupt-Datei erforderlich ist

requirejs(['lib/helper']); 

Und ich möchte die Funktion in meiner Vorlage verwenden;

<button data-remodal-action="confirm" onClick="sayHi()"/> 

Allerdings bekomme ich eine undefinierte Funktion.

Jede Hilfe sehr geschätzt.

Prost

Answer 1

Es scheint, wie Sie versuchen, sayHi Funktion aufzurufen, wie es in der ist globaler Bereich, aber es ist nicht, weil requirejs Module hat Bereich

isoliert

Um es wie folgt zu verwenden - <button data-remodal-action="confirm" onClick="sayHi()"/> Sie so etwas wie

requirejs(['lib/helper'], function(helper){ 
    window.sayHi = helper.sayHi; 
}); 

tun sollten, aber es ist ein Antipattern globale Variablen zu setzen, die von HTML nennen wird. Ich würde vorschlagen, Sie so etwas wie dieses

HTML zu tun:

<button id="sayHiButton" data-remodal-action="confirm"></button> 

JS:

requirejs(['lib/helper'], function(helper){ 
    document.getElementById('sayHiButton').addEventListener('click', function(){ 
     helper.sayHi(); 
    }); 
}); 

Answer 2

können Sie nicht, dass

<button data-remodal-action="confirm" onClick="sayHi()"/> 

verweist auf eine globale Funktion.

Ihre sayHi() Funktion ist Teil des Objekts, das Ihr helper Modul zurückgibt. Das ist überhaupt nicht global. Wenn Sie diese Funktion als Klick-Ereignis auf einer Schaltfläche hinzufügen möchten, müssen Sie das tun, wo es sichtbar ist.

Das Innere Helfer Modul

define(['aDependency'],function(){ 

    var sayHi = function(){ 
     console.log('Hi'); 
    }; 
    $('button').click(sayHi); 
return{ 
    sayHi: sayHi 
} 

oder

innerhalb Modul, das Helfer-Modul verwendet:

requirejs(['lib/helper'], function (helper) { 
    $('button').click(helper.sayHi); 
});