繁体   English   中英

Rails AJAX和Webpacker

[英]Rails AJAX and webpacker

我将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函数,但我不知道如何访问它。

您可以做一些不同的事情。 最简单的选项可能会稍微复制您的初始化代码,然后在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在这里做什么。

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM