从rails中的ajax代码中删除以前的元素

Question

我正在尝试在切换“喜欢”按钮上应用 AJAX。此设置在不刷新整个页面的情况下更新按钮状态，但之前的<%= pluralize(@company.get_likes.size, "people liked it") %> 不会被删除（“0”人喜欢它，添加到新的“1”人喜欢它”）

如何去掉前面的"@company.get_likes.size" people liked it 句？ 如何改进代码？

控制器：

  def toggle_favorite(company)
    if user_signed_in?
      if current_user.liked? company
        link_to raw("<i class='fa fa-star'></i>"), unlike_company_path(company), remote: true, method: :put
      else
        link_to raw("<i class='far fa-star'></i>"), like_company_path(company), remote: true, method: :put
      end
    else
      link_to 'sign in to like', new_user_session_path
    end
  end

路线：

resources :companies do
    member do
      put "like" => "companies#like"
      put "unlike", to: "companies#unlike"
    end
end

查看：

<div class="text-center">
  <div id="<%= dom_id(company) %>">
    <%= pluralize(company.get_likes.size, "people liked it")) %>
    <%= toggle_favorite(company) %>
  </div>
</div>

like.js.erb

let starIcon = document.querySelector("#company_<%= @company.id %>").querySelector('.fa-star')
starIcon.parentElement.outerHTML = "<%= pluralize(@company.get_likes.size, "people liked it") %> <%= escape_javascript(toggle_favorite(@company)) %>"

不像.js.erb

let farstarIcon = document.querySelector("#company_<%= @company.id %>").querySelector('.fa-star')
farstarIcon.parentElement.outerHTML = " <%= pluralize(@company.get_likes.size, t('views.company.bookmark.count_bookmark')) %> <%= escape_javascript(toggle_favorite(@company)) %>"

Answer 1

您可以通过application_helper.rb 文件实现此目的：

对于这种特殊情况，我宁愿使用.count 而不是.size（由您决定）。更多信息，您可以查看count vs length vs size in a collection Stack Overflow 问题。

1-定义方法：

def pluralize_get_likes(get_likes)
    if get_likes.count > 0
      "#{get_likes.count} people liked this"
    else
      "Here the text you want to be displayed (e.g.: Be the first one to vote this)"
    end
  end 

2-应用方法：

将like.js.erb 和unlike.js.erb 文件中的“pluralize”替换为“pluralize_get_likes”。

like.js.erb：

let starIcon = document.querySelector("#company_<%= @company.id %>").querySelector('.fa-star')
starIcon.parentElement.outerHTML = "<%= pluralize_get_likes(@company.get_likes) %> <%= escape_javascript(toggle_favorite(@company)) %>"

视图也是如此：

<div class="text-center">
  <div id="<%= dom_id(company) %>">
    <%= pluralize_get_likes(company.get_likes) %>
    <%= toggle_favorite(company) %>
  </div>
</div>

应该可以的。