小编典典

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

ajax

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


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

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

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

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

我尝试使用: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();

阅读 338

收藏
2020-07-26

共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();
2020-07-26