javascript - 如何从作为 AJAX 调用回调执行的 js.erb 触发 JS 函数？

Question

我知道标题读起来有点时髦，但这就是我正在做的事情。

我有一个看起来像这样的链接，如我的 nodes_helper.rb 中所定义:

    link_to(favorite_node_path(node, node_counter: node_counter), class: "card-favorite-count favorited", method: :post, remote: true,  data: {toggle_href: unfavorite_node_path(node) }) do
      concat(content_tag(:i, "", class: "icon-heart"))
      concat(node.cached_votes_total)
    end

最终，成功后，会导致 /views/nodes/favorites.js.erb 被执行:

$("#card-<%= @node_counter %> .card-attr").html('<%= favorites_count(@node, @node_counter) %>');
$("#card-<%= @node_counter %> .card-attr").append('<%= comments_count(@node) %>');

所有这些都工作正常，但我想做的是在按下链接后向类 card-favorite-count 添加一些动画。基本上，就在计数更新之前。

我的动画在我的 app/assets/javascripts/nodes.js.coffee 中定义，如下所示:

animate_favorite = ($favorite) ->
  $favorite.addClass 'active'
  card = $favorite.parent().parent().parent()
  card_id = card.attr('id')
  setTimeout (->
    $('#' + card_id).find('.card-favorite-count').removeClass 'active'
    return
  ), 1200
  return

$(document).ready ->
  $('.card-favorite-count').click ->
    animate_favorite $(this)
    return
  return

上面的 JS 版本可以在普通的旧式 HTML/JS 界面中工作，但我试图将它与我正在进行的所有其他操作 Hook - 因此转换为 CoffeeScript。

那么，如何从我的 favorite.js.erb 中调用 animate_favorite 函数？

编辑 1

根据 Ryan 的建议，我在我的 favorite.js.erb 中尝试了这个:

window.animate_favorite($(this));
$("#card-<%= @node_counter %> .card-attr").html('<%= favorites_count(@node, @node_counter) %>');
$("#card-<%= @node_counter %> .card-attr").append('<%= comments_count(@node) %>');

但是我在 JS 控制台中收到此错误:

window.animate_favorite($(this));
$("#card-1 .card-attr").html('<a class="card-favorite-count favorited" data-method="post" data-remote="true" data-toggle-href="/nodes/2/favorite" href="/nodes/2/unfavorite?node_counter=1" rel="nofollow"><i class="icon-heart"></i>1</a>');
$("#card-1 .card-attr").append('<span class="card-comment-count"><i class="icon-speech-bubble-1"></i>0</span>');

comments.self.js?body=1:5 parsererror

编辑2

根据 F 的问题，这是我执行此操作的 Controller :

  def favorite
    @node.liked_by current_user
    @node_counter = params[:node_counter]
    current_user.events.create(action: "favorited", eventable: @node)

    respond_to do |format|
      format.js
      format.html{ redirect_to @node }
    end
  end

编辑3

当我按照 The F 的建议将我想要执行的 JS 直接放入我的 favorite.js.erb 中时，一切都按照我想要的方式工作。

即这就是我的 favorite.js.erb 现在的样子:

$("#card-<%= @node_counter %> .card-attr").html('<%= favorites_count(@node, @node_counter) %>');
$("#card-<%= @node_counter %> .card-attr").append('<%= comments_count(@node) %>');

$("#card-<%= @node_counter %> .card-attr .card-favorite-count").addClass('favorited active');
setTimeout(function() {
    $("#card-<%= @node_counter %> .card-attr .card-favorite-count").removeClass('active');
},1200);

所以问题是，如何让它在我的 Rails JS 文件中工作？我应该将此函数放入哪个文件中，以便我可以在我的 favorite.js.erb 中执行它，而不是在那里声明它？

Answer 1

您是否在将节点插入 dom 之前调用 window.animate_favorite($('.card-favorite-count')); ？

更新答案

最好返回一个 json 响应，其中包含您想要包含并设置动画的 html 部分。然后，您可以监听来自 nodes.js.coffee 的成功 ajax 调用，该调用是通过收藏其中一张卡片而触发的。为了实现这一目标，您应该研究如何有效地使用 javascript。也许看看layouts & rendering还有passing data to javascript

目前我会保持代码原样，因为重复代码的数量相当小，并且它按照您想要的方式工作。

最喜欢的.js.erb

$("#card-<%= @node_counter %> .card-attr").html('<%= favorites_count(@node, @node_counter) %>');
$("#card-<%= @node_counter %> .card-attr").append('<%= comments_count(@node) %>');

$("#card-<%= @node_counter %>").addClass('active');
setTimeout(function() { $("#card-<%= @node_counter %>").removeClass('active'); }, 1200);

此外，js 不太一致，因为您在点击函数中传递 $('.card-favorite-count') 但想传递 $('i .icon-heart') 在您最喜欢的.js.erb 中。您应该尝试始终使用类似的选择器(card 或 icon)，除非有特定原因您使用这两个选择器。然而，坚持使用一个，也将简化您现有的 jquery。