javascript - 如何使用 format.js 返回错误消息并更新我的 UI？

Question

在我的 index.html.erb 中，我有这样的部分渲染:

<div class="card-comments">
    <%= render partial: "nodes/comment", collection: node.comments.order(created_at: :desc) %>
</div>

该部分 - _comment.html.erb - 看起来像这样:

<div id="comment-<%= comment.id %>">
  <%= comment.message %> | <%= comment.user.name %> | <%= time_ago_in_words(comment.created_at) %><br />
</div>

我的 CommentsController#Create 操作如下所示:

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

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

如您所见，这仅渲染 js，因此调用此 create.js.erb:

$("#<%= @card_id %> .card-comments").prepend("<%= j (render partial: 'nodes/comment', locals: { comment: @comment}) %>");
$("#card-input-field-<%= @card_id %>").val('');

这是我的评论模型及其规则:

class Comment < ActiveRecord::Base
  validates_presence_of :message, message: "You can't submit an empty comment."

  belongs_to :user
  belongs_to :node, counter_cache: true

  def type?
    "Comment"
  end
end

因此，在存在有效评论的情况下(即它不会使我的任何验证规则无效)，所有这些都非常有效。但是，我希望能够优雅地处理错误。

当违反验证规则时，例如输入空白注释，它会在 server.log 中返回此错误，但在 UI 中不执行任何操作:

Started POST "/nodes/101/comments" for 127.0.0.1 at 2015-07-14 00:56:30 -0500
Processing by CommentsController#create as JS
  Parameters: {"utf8"=>"✓", "comment"=>{"message"=>""}, "card_id"=>"card-2", "node_id"=>"101"}
  User Load (4.2ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 57  ORDER BY "users"."id" ASC LIMIT 1
  FamilyTree Load (1.0ms)  SELECT  "family_trees".* FROM "family_trees"  WHERE "family_trees"."user_id" = $1 LIMIT 1  [["user_id", 57]]
  Role Load (1.6ms)  SELECT "roles".* FROM "roles" INNER JOIN "users_roles" ON "roles"."id" = "users_roles"."role_id" WHERE "users_roles"."user_id" = $1 AND (((roles.name = 'admin') AND (roles.resource_type IS NULL) AND (roles.resource_id IS NULL)))  [["user_id", 57]]
  Node Load (1.1ms)  SELECT  "nodes".* FROM "nodes"  WHERE "nodes"."id" = $1 LIMIT 1  [["id", 101]]
   (1.1ms)  BEGIN
   (1.8ms)  ROLLBACK
  Rendered nodes/_comment.html.erb (21.5ms)
  Rendered comments/create.js.erb (23.7ms)
Completed 500 Internal Server Error in 325ms (ActiveRecord: 51.2ms)

NoMethodError - undefined method `>' for nil:NilClass:
  actionview (4.1.12) lib/action_view/helpers/date_helper.rb:74:in `distance_of_time_in_words'
  actionview (4.1.12) lib/action_view/helpers/date_helper.rb:153:in `time_ago_in_words'
  app/views/nodes/_comment.html.erb:2:in `_app_views_nodes__comment_html_erb___2666929257313190166_70115251186960'
  actionview (4.1.12) lib/action_view/template.rb:145:in `block in render'
  activesupport (4.1.12) lib/active_support/notifications.rb:161:in `instrument'

所以，我想要发生的是，每当发生错误时，我希望它告诉 UI 中的用户(我猜是在 create.js.erb 中)问题是什么。

我该怎么做？

Answer 1

Use @comment or @node in create.js.erb to check if there are errors or not. Like to check validation error:

  <% if @comment.errors.present? %>

    //validation error change you ui here

  <% else %>

    //Success, change you ui here

  <% end %>