2

我正在尝试将我的待办事项列表应用程序转换为使用 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

任务/update.js.erb ：

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

这是我的列表/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 来自哪里？如果我的问题不清楚，请告诉我，我会尝试改写它。为了清楚起见，我的代码有效，但我不知道为什么？

4

1 回答 1

0

每当您对控制器中的更新方法执行 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 - 否则它附加到不完整任务 div。

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

未完成的任务 -<div class="tasks" id="incomplete_tasks">

于 2013-06-16T05:30:04.667 回答