Javascript Rails-AJAX和webpacker

我正在使用webpacker的5.2。这是一个带有评论的简单餐馆应用程序

评论有一个栏目内容和评级。 在我的

app/javascript/plugins

中，我运行了一个小脚本，在表单上创建了一个星级，这使得用于评级的输入看起来像是星级，（），效果很好

但是，我在餐馆展示页面上显示评论和评论表单，当提交呈现以下js的do AJAX请求时-基本上，它会将新评论附加到该餐馆的评论列表中，然后刷新整个表单以消除输入。如果没有保存评论，我只刷新表单

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 %>

函数刷新表单（innerHTML）{
const newReviewForm=document.getElementById（'new_review'）；
newReviewForm.innerHTML=innerHTML；
}
功能添加审查（审查WHTML）{
const reviews=document.getElementById（'reviews'）；
reviews.insertAdjacentHTML（'beforeed'，reviewwhtml）；
}
刷新表格（“”）；
addReview（“”）；
刷新表格（“”）；

这个AJAX请求也可以按预期工作，但是当简单表单刷新时，评级输入只是一个普通的下拉列表，不再是插件中的星星。如何在我的AJAX js中调用脚本，它位于视图文件夹中的

app/javascript/plugin/init_star.js

---

我还尝试将星体脚本打包，并仅在餐厅/展会上调用

%

，甚至在部分呈现表单（并刷新表单）时调用它。我需要再次调用star函数，但我不知道如何访问它。

您可以做一些不同的事情。最简单的选择可能是复制一点初始化代码，然后简单地以刷新形式重新初始化stars插件，注意先销毁现有的插件。类似的内容（取自自述文件，可能不是您的初始化）

如果你想干掉这一点，并寻求架构建议，我通常会说，我倾向于让rails成为一个纯JSON api后端，并通过webpacker完全通过你的包处理前端代码

没有通过ajax呈现JS或html。这取决于你自己的喜好和应用程序当前的构建方式。例如，您是否正在规划移动应用程序？将webpacker与API和前端代码库紧密分离会很有帮助。这只是一个网络应用程序吗？也许放弃webpacker，转而使用更传统的Rails-y工具，比如Turbolinks，以及您在这里通过ajax呈现html所做的工作

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