现在我已经升级到 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 %>
撤消.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();