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

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

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

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

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

Что я хотел бы иметь: - файл 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 %>

отменить.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();

ruby-on-rails jquery ajax partial-views unobtrusive-javascript
person Zac Randles    schedule 03.03.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Не могли бы вы просто поместить код в 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();
person Plattsy    schedule 04.03.2011
comment
Это в основном то, что я в итоге сделал. Я помещал $(document).ready(prep_drag_drop) в любой файл, который нуждался в возможности перетаскивания. - person Zac Randles; 14.06.2011