文章/答案/技术大牛

发布

问Rails AJAX和webpacker
EN

Stack Overflow用户

提问于 2019-06-30 13:37:56

回答 1查看 331关注 0票数 0

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

评论有一个栏目内容和评级。在我的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请求也可以正常工作，但是当刷新简单的表单时，rating的输入只是一个普通的下拉列表，而不再是插件中的星星。如何从视图文件夹中的AJAX js中的app/javascript/plugin/init_star.js调用该脚本？

我还尝试将星型脚本放在包中，只在restaurants/show上调用<%= javascript_pack_tag> %，甚至在部分呈现表单(并刷新它)时调用它。我需要再次调用star函数，但我不知道如何访问它。

ajax

javascript

jquery

ruby-on-rails

回答 1

Stack Overflow用户

发布于 2019-06-30 23:34:30

你可以做一些不同的事情。最简单的选择可能是复制一些初始化代码，然后在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。这在一定程度上取决于你自己的偏好和应用程序当前的构建方式。例如，您是否正在规划移动应用程序？将API和前端代码库紧密分离的webpacker将会很有帮助。这只是一个网络应用吗？也许可以放弃webpacker，转而使用更传统的Rails-y工具，比如Turbolinks，以及您在这里通过ajax渲染html所做的事情。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56822654

复制

相似问题

问Rails AJAX和webpacker
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Rails AJAX和webpackerEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Rails AJAX和webpacker
EN