Как использовать функцию из библиотеки NPM в шаблоне html.eex - PullRequest
Новая
       20

Как использовать функцию из библиотеки NPM в шаблоне html.eex

0 голосов
/ 06 ноября 2018

Используя Phoenix 1.4 с веб-пакетом, я добавил "findandreplacedomtext": "^0.4.6" в свой файл package.json и установил библиотеку.

Теперь в app.js у меня есть import findAndReplaceDOMText from 'findandreplacedomtext';, и это позволяет мне использовать библиотеку , но она работает только в файле app.js . Я хочу иметь возможность использовать библиотеку в своих шаблонах представления, но всякий раз, когда я пытаюсь использовать ее в шаблоне, я получаю сообщение об ошибке в консоли Uncaught ReferenceError: findAndReplaceDOMText is not defined.

Вот как выглядит код внутри моего шаблона: 

<div id="container">
  This is a test.
</div>
<script>
  findAndReplaceDOMText(document.getElementById('container'), {
    find: 'test',
    wrap: 'mark'
  });
</script>

Это приводит к ошибке в консоли. Но если я помещу тот же код JavaScript в app.js под оператором импорта библиотеки, это сработает. Как я могу использовать библиотеку внутри моего шаблона представления и вне app.js?

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

В верхней части webpack.config.js я поставил const webpack = require('webpack');, чтобы в списке плагинов я мог поставить new webpack.ProvidePlugin({findAndReplaceDOMText: "findandreplacedomtext"}). Это сделало так, чтобы я мог удалить оператор импорта для библиотеки из app.js.

Затем в app.js я помещаю window.findAndReplaceDOMText = findAndReplaceDOMText;, чтобы выставить модуль за пределами app.js.

Наконец, в моем шаблоне мне пришлось обернуть функцию в событие загрузки содержимого, чтобы убедиться, что я не вызывал функцию до ее загрузки. 

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    findAndReplaceDOMText(document.getElementById('container'), {
      find: 'test',
      wrap: 'mark'
    });
  });
</script>
0 голосов
/ 06 ноября 2018

Ошибка в вашем js, вы выбираете элемент с идентификатором 'container', но это класс, поэтому должно быть: 

findAndReplaceDOMText(document.getElementsByClassName('container')
...