Question

我一直在尝试在我的网络应用中实现AJAX功能，并且遇到了一些困难。在我的应用程序中，用户可以喜欢名为“wads”的内容。到目前为止，我已经能够获得喜欢的功能来异步更新数据库，但我有点担心如何获得计数器（显示在like按钮旁边）以进行更新。我是JS / Coffeescript的新手所以非常感谢一些帮助！

到目前为止，我的方法是使用ruby处理程序（.erb）作为我的coffeescript代码（.coffeescript.erb）。该文件中的代码如下所示：

$(document).on "click", "#upvote-count", ->
    $("#upvote-counter").html(<%= wad.get_upvotes.size %>)

然而，我得到一个轨道错误保持“wad”未定义。我正在他们显示的页面上迭代一组wads。代码如下：

<% @wads.each do |wad| %>
   <div class="list-group-item wad-list-group-item">
    <div class="row">
      <%= link_to wad_comments_path(wad), class: 'col-3 justify-content-center align-items-center' do %>
      <%= image_tag wad.image.url(:thumb), class: 'img-fluid' %>
 <% end %>

<%= link_to wad_comments_path(wad), class: 'wad-link' do %>
  <div class="col-md-6 col-9">
    <h5><%= wad.problem_state %></h5>
    <p><%= wad.short_form %></p>
    <p class="text-right wad-comment">
      <%= link_to fa_icon("comment"), wad_comments_path(wad), options = {class: "profile-link"} %>
    </p>
  </div>
<% end %>

<%= render 'wads/actions', wad: wad %>

并且“wad / actions”呈现：

  <div>
   <%= link_to fa_icon("chevron-circle-up", class: "profile-link", id: "upvote-count"), like_wad_path(wad), remote: true, method: :put %>
 <span class="nowrap" id="upvote-counter"> <%= wad.get_upvotes.size %> 
 </span>
</div>

Answer 1

你可以做很多事情。首先，我建议使用带有rails方式的ajax。这意味着拥有像这样的upvote链接：

wad_3

请注意，我们有一个div，其id为link_to。在remote: true中，语法WadsController#upvote代表，进行ajax调用而不是导航到此路径。这将触发class WadsController < ApplicationController def index @wads = Wad.all end def upvote @wad = Wad.find(params[:id]) @wad.upvotes = @wad.upvotes + 1 @wad.save end并增加upvotes。

WadsController#upvote

端

执行js后，该操作将触发一个视图，但该视图现在不是html，而是带有一些嵌入式ruby的javascript（erb）文件（{{1} }）称为upvote.js.erb。它应该是这样的：

$('document').ready(function() {
    var div = $('#wad_<%= @wad.id %>');
    div.empty().html("Upvotes: <%= @wad.upvotes %>");
});

此文件采用更新的@wad，找到其upvotes counter div，并使用新的upvotes计数器更新其内容。

当然，为了让一切正常，你必须为控制器定义路线。

Rails.application.routes.draw do
  root 'wads#index'
  resources :wads do
    collection do
      post 'upvote/:id', to: 'wads#upvote', as: 'upvote'
    end
  end
end

如果您想了解有关在Rails中使用Javascript和Ajax的更多信息，请阅读官方文档https://mytrade20180517093224.azurewebsites.net/Account/Register

如何与coffeescript通信rails以实时更新页面内容

1 个答案: