Рельсы AJAX и веб-упаковщик

Question

Я использую 5.2 с webpacker. Это простое ресторанное приложение с отзывами.

Обзоры имеют содержание столбца и рейтинг. В моем app/javascript/plugins я запускаю небольшой скрипт, который создает рейтинг в форме звезды, который делает ввод для рейтинга похожим на звезды (https://github.com/antennaio/jquery-bar-rating), который работает нормально.

Однако, я отображаю отзывы и форму обзора на странице показа ресторанов и при отправке делаю запрос AJAX, который отображает следующие js - в основном, он добавляет новый отзыв в список отзывов для этого ресторана, а затем я обновляю вся форма, чтобы избавиться от ввода. Если обзор не сохраняется, я просто обновляю форму.

function refreshForm(innerHTML) {
  const newReviewForm = document.getElementById('new_review');
  newReviewForm.innerHTML = innerHTML;
}

function addReview(reviewHTML) {
  const reviews = document.getElementById('reviews');
  reviews.insertAdjacentHTML('beforeend', reviewHTML);
}

<% if @review.errors.any? %>
  refreshForm('<%# j render "reviews/form", restaurant: @restaurant, review: @review %>');
<% else %>
  addReview('<%= j render "reviews/show", review: @review %>');
  refreshForm('<%= j render "reviews/form", restaurant: @restaurant, review: Review.new %>');

<% end %>

Этот AJAX-запрос также работает по назначению, но когда обновляется простая форма, вход для рейтинга - это просто нормальный выпадающий список, а не звезды из плагина. Как я могу вызвать скрипт из app/javascript/plugin/init_star.js внутри моего AJAX js, который находится внутри папки просмотра?

Я также пытался поместить звездный скрипт в пакет и вызывать <%= javascript_pack_tag> % только в ресторанах / шоу или даже при частичном рендеринге формы (и ее обновлении). Мне нужно снова вызвать функцию звезды, и я не знаю, как получить к ней доступ.

Answer 1

Вы могли бы сделать несколько разных вещей. Самый простой вариант, скорее всего, немного дублирует ваш инициализирующий код и просто переинициализирует плагин stars в refreshForm, стараясь сначала уничтожить существующий. Примерно так (взято из readme, может не быть вашей инициализацией)

function refreshForm(innerHTML) {
  const newReviewForm = document.getElementById('new_review');
  newReviewForm.innerHTML = innerHTML;
  // destroy the existing one
  $('#example').barrating('destroy');
  // insert your custom initialization here
  $('#example').barrating({
    theme: 'fontawesome-stars'
  });
}

Если вы хотите высушить это и ищете совет по архитектуре, я бы сказал, что я стремлюсь сделать рельсы чистым JSON-API-интерфейсом и полностью обрабатывать код веб-интерфейса через ваш пакет через веб-упаковщик.

Нет рендеринга JS или HTML через AJAX. Это немного зависит от ваших собственных предпочтений и от того, как приложение в настоящее время создается. Например, вы планируете мобильные приложения? Будет полезен переход на веб-упаковщик с сильным разделением API и базы кода внешнего интерфейса. Это просто веб-приложение? Может быть, избавьтесь от webpacker и перейдите на более традиционные Rails-ы, такие как Turbolinks, и то, что вы делаете здесь с рендерингом html через ajax.