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

How do I preserve the `this` from a previous JS state and transfer it to another?

本文关键字：this 另一个 转移 保存 状态 JS      更新时间：2023-09-26

所以我有一个视图，它有一个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做三件事:

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

我不知道如何做到这一点- JS不是我的强项。

我试着在我的create.js.erb中这样做，但我有各种奇怪的行为，包括将1卡上评论的整个内容复制到另一张卡上的评论:

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

我如何实现上述目标?

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

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