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();