Rails 3: Как мне вызвать функцию javascript из файла js.erb - PullRequest
Новая
       26

Rails 3: Как мне вызвать функцию javascript из файла js.erb

4 голосов
/ 04 марта 2011

Теперь, когда я обновился до Rails 3, я пытаюсь найти правильный способ разделения и повторного использования фрагментов javascript.Вот сценарий, с которым я имею дело:

У меня есть страница с двумя областями: одна с элементами, которые должны быть перетаскиваемыми, другая с опускаемыми элементами.

Когда страница загружается, яиспользуйте jQuery для настройки draggables и droppables.В настоящее время у меня есть сценарий в головной части application.html.erb, который, я уверен, не является правильным решением, но, по крайней мере, работает.

Когда я нажимаю кнопку на странице, ajax-вызовсделано для моего контроллера, который заменяет draggables новым набором элементов, которые также должны быть draggable.У меня есть файл js.erb, который отображает частичное в правильном месте.После рендеринга мне нужно сделать новые элементы перетаскиваемыми, поэтому я хотел бы повторно использовать код, который в настоящее время находится в application.html.erb, но я не нашел правильного способа сделать это.Я могу сделать перетаскиваемые новые элементы только путем вставки кода непосредственно в мой файл js.erb (yuck).

Что бы я хотел иметь: - файл javascript, содержащий функции prepdraggables () и prepdroppables() - способ вызова любой функции из application.html.erb или из файла js.erb

Я пытался использовать: content_for для хранения и повторного использования кода, но не могу его получитьработает правильно.

То, что у меня сейчас есть в разделе head файла 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();

1 Ответ

3 голосов
/ 04 марта 2011

Не могли бы вы просто поместить код из 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();
...