如何从以前的 JS 状态中保留“this”并将其转移到另一个状态？

Question

所以我有一个带有 simple_form 的视图，如下所示：

<%= simple_form_for([node, Comment.new], html: { id: "new_comment_card-#{@card_number}"}, remote: true) do |f| %>
        <%= f.error_notification %>
        <%= f.input_field :message, as: :text, id: "card-input-field-#{@card_number}", class: "input-field", placeholder: "Share your thoughts", cols: "30", rows: "10" %>
        <%= f.button :submit %>
<% end %>

此表单在同一视图中出现多次，因此指定了动态id。

当按下该按钮时，一些 JS 会像这样拦截提交（以确保提交为正确的表单发送正确的凭据）：

  $(".input-submit").click(function(event) {
      event.preventDefault();
      $(this).closest('form').submit();
  });

否则有时会提交最后呈现的表单，这会导致各种问题。

提交后，最终会导致CommentsController#Create，如下所示：

  def create
    @node = Node.find(params[:node_id])
    @comment = current_user.comments.new(comment_params)
    @comment.node = @node

    respond_to do |format|
      if @comment.save and @node.save
        format.html
        format.js
      else
        format.html
        format.js
      end
    end
  end

然后查找并执行 - create.js.erb。我希望我的create.js.erb 做 3 件事：

1. 将新保存的评论添加到当前div#id=card-comments 的顶部，可能带有小动画来显示新评论。
2. 下推现有 cmets 的另一个列表，为步骤 1 中新创建的评论让路。
3. 从输入字段中删除文本，这样用户就可以在不刷新的情况下添加另一条评论，也许需要一点点抖动/突出显示/动画。

我不确定如何实现这一点 - JS 不是我的强项。

我在create.js.erb 中尝试过这样做，但我有各种奇怪的行为，包括将一张卡上的 cmets 的全部内容复制到另一张卡上的 cmets：

$('#card-comments').append("<%= j (render partial: 'nodes/comment', collection: @node.comments) %>");

我如何实现上述目标？

Answer 1

如果用户可以在页面上的多张卡片上提交 cmets，它应该向控制器提交一个参数，表明评论是在哪张卡片上提交的，并且 JS 应该替换 该特定卡片的 cmets .当前，您的 jQuery 选择器位于与特定卡片不匹配的 #card-cmets 上。或许将 cmets 放在具有类似于表单的特定 ID 的 div 中，并替换该 div 的所有 cmets：

$('#card-<%= params[:node_id] %>-comments').html("<%= j (render partial: 'nodes/comment', collection: @node.comments) %>");