Как вызвать функцию модуля ES6 из onclick - PullRequest
Новая
       4

Как вызвать функцию модуля ES6 из onclick

0 голосов
/ 27 мая 2020

У меня есть HTML с кнопкой, событие onclick которой запускает функцию JavaScript.

Мне нужно добиться того же поведения, когда функция JavaScript является функцией модуля ES6.

У меня есть простой пример: 

<head>
  <meta charset="utf-8">
  <script src="./js1.js"></script>
  <script type="module" src="./js2.js"></script>
  <script type="module">
    import { Es6Module3 } from "./js3.js";
    document.querySelector('#myFunction3').addEventListener('click', Es6Module3.myFunction3);
  </script>
</head>

<body>
  <button onclick="myFunction1(1)">button1</button>
  <button onclick="Es6Module2.myFunction2(2)">button2</button>
  <button type="button" id="myFunction3">button3</button>
</body>

Это также воспроизводится в https://jsfiddle.net/avnerm/jho6qgLu/18/

При нажатии button1 функция myFunction1 Вызывается в js1. js, и переданное значение правильно выводится в консоль. хорошо!

Но при нажатии button2 получаю сообщение:

ReferenceError: Es6Module не определен

В какой-то момент Мне удалось запустить функцию модуля (пример использования button3 ), установив прослушиватель событий, но сейчас он не работает, и я не знаю, как передать параметр в функцию в этой реализации.

В моем случае мне нужно иметь возможность передать параметр.

Как я могу вызвать функцию модуля ES6 из атрибута onclick и передать ей параметр?

РЕДАКТИРОВАТЬ: @CertainPerformance, Мой исходный код html включает jinja2, который охватывает код 3 раза (3 группы с идентификаторами: 1, 2, 3)

Я использовал ваш шаблон, и он создал 3 кнопки (button1, button2 , button3) с 3 слушателями событий. Когда я нажимаю на каждую кнопку, я вижу в журнале соответствующий идентификатор группы.

У меня это отлично работает!

Я просто хотел подтвердить, что это способ справиться с html, jinja2 и es6.

Спасибо! 

class Es6Module2 {
    static myFunction2 = function(val) {
        console.log('BEG myFunction2');
        console.log('val'); 
        console.log(val); 
    };
};

export { Es6Module2 };
{% block content %}

<div class="admin-view-groups">
    {% for group in groups %}
        <button id="button{{group.id}}">Download Group</button>
        <script type="module">
         import { Es6Module2 } from './Es6Module2.js';
         document.querySelector('#button{{group.id}}').addEventListener('click', () => {
             Es6Module2.myFunction2({{ group.id }});
         });
        </script>
    {% endfor %}
</div>

{% endblock %}

1 Ответ

1 голос
/ 27 мая 2020

Единственный способ сделать это - назначить импортированную функцию модуля объекту окна, чтобы на него мог ссылаться встроенный обработчик: 

  <script type="module">
    import { Es6Module2 } from "./js2.js";
    window.Es6Module2 = Es6Module2;
  </script>

Но это противоречит цели модулей.

В любом случае, встроенные обработчики никогда, никогда не должны использоваться. У них слишком много проблем, включая эту (требуется, чтобы функция вызывалась в глобальной области видимости). Лучше всего избегать их и использовать вместо этого addEventListener, чтобы правильно добавить слушателя.

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

import { fn } from './script.js';
document.querySelector('button').addEventListener('click', () => {
  fn('foo');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...