Rails 3：我如何從js.erb文件調用javascript函數

Question

現在我已經升級到Rails 3，我試圖找出正確的方法來分離和重用JavaScript的片段。下面是我處理的場景：

---

我有兩個頁面區域：一個是要拖動的元素，其他同droppables。

當頁面加載時，我使用jQuery來設置可拖動和拖放。目前我在application.html.erb的頭部有腳本，我相信這不是正確的解決方案，但至少可以工作。

當我按下頁面上的按鈕時，我的控制器會發出一個ajax調用，它會用一組也應該可拖動的元素替換可拖動元素。我有一個js.erb文件，在正確的位置渲染一個部分。渲染後，我需要使新元素可拖動，所以我想重用當前存在於application.html.erb中的代碼，但我還沒有找到正確的方法來實現它。我只能通過將代碼直接粘貼到我的js.erb文件（yuck）中來使新元素可拖動。

我想什麼有： - 一種從application.html.erb或從js.erb文件

調用兩個函數 - 包含功能prepdraggables（）和prepdroppables（） JavaScript文件

我試過使用：content_for來存儲和重用代碼，但似乎無法讓它正常工作。

---

我目前在application.html.erb頭部分

<% content_for :drag_drop_prep do %> 
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 

    // declare all DOM elements with class draggable to be draggable 
    $(".draggable").draggable({ revert : 'invalid' }); 

    // declare all DOM elements with class legal to be droppable 
    $(".legal").droppable({ 
    hoverClass : 'legal_hover', 
    drop : function(event, ui) { 

     var c = new Object(); 
     c['die'] = ui.draggable.attr("id"); 
     c['cell'] = $(this).attr("id"); 
     c['authenticity_token'] = encodeURIComponent(window._token); 

     $.ajax({ 
     type: "POST", 
     url: "/placeDie", 
     data: c, 
     timeout: 5000 
     }); 

    }}); 
}); 
</script> 
<% end %> 

undo.js.erb

$("#board").html("<%= escape_javascript(render :partial => 'shared/board', :locals => { :playable => true, :restartable => !session[:challenge]}) %>") 
// This is where I want to prepare draggables. 
<%= javascript_include_tag "customdragdrop.js" %> // assuming this file had the draggables code from above in a prepdraggables() function 
prepdraggables(); 

Answer 1

你不能只是把drag_drop_prep代碼到一個函數，然後調用application.html.erb和每個部分？我猜我誤解了。

function prepdraggables(){ 
    // declare all DOM elements with class draggable to be draggable 
    $(".draggable").draggable({ revert : 'invalid' }); 

    // declare all DOM elements with class legal to be droppable 
    $(".legal").droppable({ 
    hoverClass : 'legal_hover', 
    drop : function(event, ui) { 

     var c = new Object(); 
     c['die'] = ui.draggable.attr("id"); 
     c['cell'] = $(this).attr("id"); 
     c['authenticity_token'] = encodeURIComponent(window._token); 

     $.ajax({ 
     type: "POST", 
     url: "/placeDie", 
     data: c, 
     timeout: 5000 
     }); 
    }}); 
} 

而在application.html.erb和undo.js.erb：

prepdraggables();