Rails 3：如何从 js.erb 文件中调用 javascript 函数

Question

现在我已经升级到 Rails 3，我正在尝试找出分离和重用 javascript 片段的正确方法。这是我正在处理的场景：

---

我有一个包含两个区域的页面：一个包含应可拖动的元素，另一个包含可放置元素。

当页面加载时，我使用 jQuery 来设置 Draggables 和 droppables。目前我在 application.html.erb 的头部有脚本，我确信这不是正确的解决方案，但至少有效。

当我按下页面上的按钮时，会向我的控制器发出 ajax 调用，用一组新的元素替换可拖动元素，这些元素也应该是可拖动的。我有一个 js.erb 文件，它在正确的位置呈现部分。渲染后我需要使新元素可拖动，所以我想重用当前存在于 application.html.erb 中的代码，但我还没有找到正确的方法。我只能通过将代码直接粘贴到我的 js.erb 文件中来使新元素可拖动（讨厌）。

我想要的： - 一个包含函数 prepdraggables() 和 prepdropppables() 的 javascript 文件 - 从 application.html.erb 或 js.erb 文件调用任一函数的方法

我尝试使用 :content_for 来存储和重用代码，但似乎无法正常工作。

---

我目前在 application.html.erb 的 head 部分中拥有的内容

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