javascript - 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 请求也按预期工作，但是当刷新简单表单时，评级输入只是一个普通的下拉列表，而不再是插件中的星星。如何从 app/javascript/plugin/init_star.js 调用脚本在我的 AJAX js 中，它位于 View 文件夹中？

我还尝试将明星脚本打包并调用 <%= javascript_pack_tag> %仅在餐厅/表演中，甚至在部分呈现形式(并刷新它)中。我需要再次调用star函数，但我不知道如何访问它。

Answer 1

你可以做一些不同的事情。最简单的选择可能是稍微重复您的初始化代码，然后简单地重新初始化刷新表单中的 star 插件，并首先注意销毁现有的插件。像这样的东西(取自自述文件，可能不是你的初始化)

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。这在一定程度上取决于您自己的喜好以及应用程序当前的构建方式。例如，您是否正在规划移动应用程序？使用 API 和前端代码库强分离的 webpacker 将会很有帮助。这只是一个网络应用程序吗？也许放弃 webpacker 并转向更传统的 Rails-y 东西，比如 Turbolinks 以及你在这里通过 ajax 渲染 html 所做的事情。