Rails 3:如何从js.erb文件调用javascript函数 [英] Rails 3: How do I call a javascript function from a js.erb file

问题描述

现在，我已经升级到Rails 3，我正在尝试找出分离和重用JavaScript片段的正确方法.这是我正在处理的方案:

Now that I've upgraded to Rails 3, I'm trying to figure out the proper way to separate and reuse pieces of javascript. Here's the scenario I'm dealing with:

我有一个页面，其中包含两个区域:一个区域包含应可拖动的元素，另一个区域包含可放置的元素.

I have a page with two areas: one with elements that should be draggable, the other with droppables.

页面加载时，我使用jQuery设置可拖动对象和可放置对象.目前，我在application.html.erb的开头部分有脚本，我确信这不是正确的解决方案，但至少可以正常工作.

When the page loads I use jQuery to setup the draggables and droppables. Currently I have the script in the head portion of application.html.erb, which I'm sure is not the right solution but at least works.

当我按下页面上的按钮时，将对我的控制器进行ajax调用，该调用将可拖动对象替换为一组也应该可拖动的元素.我有一个js.erb文件，该文件在正确的位置呈现了部分内容.渲染后，我需要使新元素可拖动，因此我想重用当前存在于application.html.erb中的代码，但是我没有找到正确的方法.我只能通过将代码直接粘贴到我的js.erb文件中(可恶)来使新元素可拖动.

When I press a button on the page, an ajax call is made to my controller that replaces the draggables with a new set of elements that should also be draggable. I have a js.erb file that renders a partial in the correct location. After rendering I need to make the new elements draggable, so I'd like to reuse the code that currently lives in application.html.erb, but I haven't found the right way to do it. I can only make the new elements draggable by pasting the code directly into my js.erb file (yuck).

我想要拥有的东西: -包含功能prepdraggables()和prepdroppables()的javascript文件 -一种从application.html.erb或js.erb文件调用函数的方法

What I'd like to have: - a javascript file that contains the functions prepdraggables() and prepdroppables() - a way to call either function from application.html.erb or from a js.erb file

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

I've tried using :content_for to store and reuse the code, but can't seem to get it working correctly.

目前在application.html.erb头部分中的内容

What I currently have in the head section of 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

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

推荐答案

难道您不只是将drag_drop_prep中的代码放入函数中，然后从application.html.erb及其每个部分中调用该函数吗?我想我误会了.

Couldn't you just put the code in drag_drop_prep into a function and then call the function from the application.html.erb and each partial? I'm guessing I have misunderstood.

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中:

And in application.html.erb and undo.js.erb:

prepdraggables();

这篇关于Rails 3:如何从js.erb文件调用javascript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！