Rails AJAX 和 webpacker答案

【问题标题】：Rails AJAX and webpackerRails AJAX 和 webpacker
【发布时间】：2019-06-30 05:37:56
【问题描述】：

我正在使用带有 webpacker 的 5.2。这是一款带有评论的简单餐厅应用。

评论具有列内容和评级。在我的app/javascript/plugins 中，我运行了一个小脚本，它在表单上创建了一个星级评分，这使得评分的输入看起来像星星，(https://github.com/antennaio/jquery-bar-rating) 工作正常。

但是，我在餐厅显示页面上显示评论和评论表单，并在提交时执行呈现以下 js 的 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 %>

这个 AJAX 请求也可以按预期工作，但是当简单的表单被刷新时，评级的输入只是一个普通的下拉菜单，不再是插件中的星星。如何在视图文件夹中的 AJAX js 中从 app/javascript/plugin/init_star.js 调用脚本？

我还尝试将星形脚本打包并仅在餐厅/节目中调用<%= javascript_pack_tag> %，甚至在部分渲染表单（并刷新它）中调用。需要再次调用star函数，不知道怎么访问。

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

你可以做一些不同的事情。最简单的选择可能是稍微复制你的初始化代码，然后简单地在 refreshForm 中重新初始化星星插件，注意先销毁现有的插件。像这样的东西（取自自述文件，可能不是你的初始化）

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 所做的事情。

【讨论】：