使用 ajax、Rails、Coffeescript、jQuery 更新列表中的记录

Question

问题

我有一个博客列表。使用 ajax 我单击编辑以编辑特定记录。我编辑该记录并单击更新。仍然使用 ajax，我在所有记录的列表中淡入淡出——旧记录应该从记录列表中删除，取而代之的是带有新值的更新记录。

答案： 使用 ajax 的博主列表上的 Crud 操作代码，包括更新：

bloggers_controller.rb

class BloggersController < ApplicationController
  before_action :set_blogger, only: [:show, :edit, :update, :destroy]

  def index
    @bloggers = Blogger.all
    respond_to do |format|
          format.html
          format.js
    end
  end

  def show
    respond_to do |format|
         format.html { redirect_to bloggers_url }
         format.js
    end
  end


  def new
    @blogger = Blogger.new
    respond_to do |format|
         format.js
    end
  end


  def edit
    respond_to do |format|
         format.html { redirect_to bloggers_url }
         format.js
    end
  end

  def create
    @blogger = Blogger.new(blogger_params)
    respond_to do |format|
      @blogger.save
        format.html { redirect_to bloggers_url }
        format.js
    end
  end

  def update
    @blogger.update!(blogger_params)
    respond_to do |format|
         format.html { redirect_to bloggers_url }
         format.js
    end
  end

  def destroy
    @blogger.destroy
    respond_to do |format|
       format.html { redirect_to bloggers_url }
       format.js
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
     def set_blogger
      @blogger = Blogger.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def blogger_params
      params.require(:blogger).permit(:name, :age, :about)
    end
end

views/bloggers/_blogger.html.erb

<tr id="blogger-<%= blogger.id %>" class="blogger">
    <%= form_for blogger, remote: true do |f| %>
            <td><%= blogger.name %></td>
            <td><%= blogger.age %></td>
            <td><%= blogger.about %></td>
            <td><%= link_to 'Show', blogger, remote: true %></td>
            <td><%= link_to 'Edit', edit_blogger_path(blogger), remote: true %></td>
            <td><%= link_to 'Destroy', blogger, method: :delete, data: { confirm: 'Are you sure?' }, remote: true %></td>
    <% end %>
</tr>

views/bloggers/_edit.html.erb

    <h1>Editing blogger</h1>

    <%= render 'form' %>


    <%= link_to 'Back', bloggers_path, remote: true%>

</div>

views/bloggers/_form.html.erb

<%= form_for(@blogger, remote: true) do |f| %>
  <% if @blogger.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@blogger.errors.count, "error") %> prohibited this blogger from being saved:</h2>

      <ul>
      <% @blogger.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :age %><br>
    <%= f.number_field :age %>
  </div>
  <div class="field">
    <%= f.label :about %><br>
    <%= f.text_area :about %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

views/bloggers/_show.html.erb

<div id="show_blogger">
    <p id="notice"><%= notice %></p>

    <p>
      <strong>Name:</strong>
      <%= @blogger.name %>
    </p>

    <p>
      <strong>Age:</strong>
      <%= @blogger.age %>
    </p>

    <p>
      <strong>About:</strong>
      <%= @blogger.about %>
    </p>

    <%= link_to 'Edit', edit_blogger_path(@blogger), remote: true %> 
    <%= link_to 'Back', bloggers_path, remote: true%>

</div>

views/bloggers/create.js.coffee

$newBlogger = $('<%= j render(@blogger) %>').css("color", "#4F8A10").hide()
$("#all_bloggers").append($newBlogger)
$('#new_blogger').fadeOut 100, ->
    $newBlogger.effect('highlight', {color: '#DFF2BF'}, 1000)
    $newBlogger.animate({"color": "black"}, 1000).dequeue()
    $('#new_link').fadeIn(100).dequeue()

$('#new_blogger').remove()

views/bloggers/destroy.coffee

$('#blogger-<%= @blogger.id %>').fadeOut 200, ->
    this.remove()

views/bloggers/edit.js.coffee

$form = $('<%= j render("edit") %>').hide()
$bloggers = $('#listing_bloggers')
$bloggers.after($form)

if($bloggers.is(':hidden'))
    #list is already hidden
    $('#show_blogger').remove()
    $form.fadeIn 100

else
    #list needs to be hidden
    $bloggers.after($form)
    $bloggers.fadeOut 100, ->
        $form.fadeIn 100

views/bloggers/index.html.erb

<div id="listing_bloggers">
    <h1>Listing bloggers</h1>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>About</th>
          <th colspan="3"></th>
        </tr>
      </thead>

      <tbody id="all_bloggers">
        <%= render @bloggers %>
      </tbody>
    </table>

    <br>

    <%= link_to 'New Blogger', new_blogger_path, id: "new_link", remote: true %>

</div>

views/bloggers/index.js.coffee

$bloggers = $('#listing_bloggers')

if($bloggers.is(':hidden'))

    if($('#show_blogger').length == 0)
        $bloggers.fadeIn 100
        $("#edit_blogger").remove()
    else
        $('#show_blogger').fadeOut 100, ->
            $bloggers.fadeIn 100

        $('#show_blogger').remove()

views/bloggers/new.js.coffee

$form = $('<%= j render("form") %>').hide()
$('#new_link').after($form)
$('#new_link').fadeOut(100, -> 
    $form.fadeIn(100))

views/bloggers/show.js.coffee

$index = $("#listing_bloggers")
$blogger = $('<%= j render("show") %>').hide()
$index.after($blogger)
$index.fadeOut 100, ->
    $blogger.fadeIn(100)

views/bloggers/update.js.coffee

$('#blogger-<%= @blogger.id %>').replaceWith('<%= j render(@blogger) %>')
$blogger = $('#blogger-<%= @blogger.id %>').css("color", "#4F8A10")

$bloggers = $('#listing_bloggers')
$edit_blogger = $("#edit_blogger")

$edit_blogger.fadeOut 100, ->
    $bloggers.fadeIn 100, ->
        $blogger.effect('highlight', {color: '#DFF2BF'}, 1000)
        $blogger.animate({"color": "black"}, 1000).dequeue()    


$edit_blogger.remove()

Answer 1

您的博主 - 部分应该如下所示（在 erb 中）：

<div id="blogger-<%= @blogger.id %>" class="blogger">
  ...
</div>

或在haml（更清洁）：

.blogger{id: "blogger-#{@blogger.id}" }
  -# followed by the rest of your view

然后在你的update.js.erb 你可以写

$('#blogger-<%= @blogger.id %>').replaceWith('<%= j render(@blogger) %>')