2

Todo リスト アプリを 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

コントローラーで update メソッドに 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">

于 2013-06-16T05:30:04.667 に答える