Question

我正在尝试将我的待办事项列表应用转换为使用AJAX。这是TasksController的更新操作：

class TasksController < ApplicationController

def update
  @list= List.find(params[:list_id])
  @task=@list.tasks.find(params[:id])
  @task.update_attributes(params[:task])
  respond_to do |format|
   format.html { redirect_to [current_user,@list], notice: 'Task completed' }
   format.js
  end
 end

end

tasks / update.js.erb：

<% if @task.completed? %>
$('#edit_task_<%= @task.id %>').appendTo('#completed_tasks');
<% else %>
$('#edit_task_<%= @task.id %>').appendTo('#incomplete_tasks');
<% end %>

这是我的list / show.html.erb，它列出了特定列表的所有任务：

<h3>Unfinished Tasks</h3>
 <div class="tasks" id="incomplete_tasks">
 <% @list.tasks.incomplete.each do |task| %>
  <%= form_for [current_user,@list,task], remote:true do |f|  %>
   <%= f.check_box :completed %>
   <%= f.submit %>
   <%= f.label :completed, task.description %>
  <% end %>
<% end %>
</div>
<h3>Finished Tasks</h3>
<div class="tasks" id="completed_tasks">
  <% @list.tasks.completed.each do |task| %>
      <%= form_for [current_user,@list,task], remote: true do |f|  %>
          <%= f.check_box :completed %>
          <%= f.submit %>
          <%= f.label :completed, task.description %>
      <% end %>
     <% end %>
<div class="tasks" id="completed_tasks">
  <% @list.tasks.completed.each do |task| %>
      <%= form_for [current_user,@list,task], remote: true do |f|  %>
          <%= f.check_box :completed %>
          <%= f.submit %>
          <%= f.label :completed, task.description %>
      <% end %>
     <% end %>
</div>

所以，我不太了解tasks / update.js.erb代码。

$('#edit_task_').appendTo('#completed_tasks');

在上面的代码中，我们从哪个html文件中获取此div的内容：

那个div来自哪里？请告诉我，如果我的问题不清楚，我会尝试重新措辞。为了清楚起见，我的代码有效，但我不知道为什么？

Answer 1

每当您对控制器中的更新方法执行ajax请求时，任务都会更新，并且会回复format.js中的数据。在响应之后，将调用update.js.erb，它会更新页面中的不同元素，并从中发送ajax请求，并更新任务。

在你的update.js.erb中，

<% if @task.completed? %>
$('#edit_task_<%= @task.id %>').appendTo('#completed_tasks');
<% else %>
$('#edit_task_<%= @task.id %>').appendTo('#incomplete_tasks');
<% end %>

有一个@task变量，这是新任务。如果任务完成，则将任务添加到complete_tasks div中 - 否则它将附加到incomplete_tasks div。

已完成的任务 - <div class="tasks" id="completed_tasks">

不完整的任务 - <div class="tasks" id="incomplete_tasks">

在Rails 3中AJAX更新待办事项列表

1 个答案: