RequireJS возвращает функцию из модуля, который будет использоваться в шаблоне

Question

Я хочу создать функцию в модуле, который будет работать с различными зависимостями, но вызван в шаблоне, пока я получил только функцию undefined error. Где я ошибаюсь, или это просто невозможно?

модуль helper.js

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

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

Этот модуль необходим в моем главном файле

requirejs(['lib/helper']); 

И я хотел бы использовать функцию в шаблоне;

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

Однако я получаю функцию undefinde.

Любая помощь очень ценится.

Приветствия

Answer 1

Похоже, вы пытаетесь вызвать sayHi функцию, как это в глобальный охват, но это происходит не потому, что модули requirejs имеют выделенную область

Чтобы использовать его, как это - <button data-remodal-action="confirm" onClick="sayHi()"/> вы должны сделать что-то вроде

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

Но что это антипаттерн установить глобальные переменные, которые будут вызываться из HTML. Я предлагаю вам сделать что-то вроде этого

HTML:

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

JS:

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

Answer 2

Вы не можете сделать это

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

указывает на глобальную функцию.

Ваша функция sayHi() является частью объекта, который возвращает ваш модуль helper. Это вообще не глобально. Если вы хотите добавить эту функцию как событие click на кнопку, вы должны сделать это там, где она видна.

То есть внутри хелперов модуля

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

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

или

внутри модуля, который использует вспомогательный модуль:

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