Rails AJAX和Webpacker

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请求也可以按预期工作，但是当刷新简单表单时，评分输入只是正常的下拉列表，不再是插件中的星星。 如何在view文件夹内的AJAX js中从app/javascript/plugin/init_star.js调用脚本？

我还尝试将star脚本放入一个包中，并仅在餐厅/表演上，甚至在部分呈现表单（并刷新表单）时调用<%= javascript_pack_tag> % 。 我需要再次调用star函数，但我不知道如何访问它。

Answer 1

您可以做一些不同的事情。 最简单的选项可能会稍微复制您的初始化代码，然后在refreshForm中简单地重新初始化stars插件，请小心先破坏现有的插件。 诸如此类（取自自述文件，可能不是您的初始化）

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'
  });
}

如果您想干这个，并在寻找架构建议，我通常会说我倾向于将rails变成纯JSON api后端，并通过webpacker完全通过您的包处理前端代码。

无法通过Ajax呈现JS或html。 不过，这取决于您自己的喜好以及应用程序的当前构建方式。 例如，您正在计划移动应用程序吗？ 将Web Packer与API和前端代码库高度隔离会很有帮助。 这只是一个webapp吗？ 也许放下webpacker并倾向于使用诸如Turbolinks之类的更传统的Rails-y东西，以及通过ajax渲染html在这里做什么。