События драйвера Rails 3 UJS - PullRequest
Новая
       22

События драйвера Rails 3 UJS

1 голос
/ 14 октября 2010

По сообщению в блоге Симоне Карлетти , помощники Rails 3 ajax сильно изменились.Мы должны написать больше javascript с rails 3, чем мы привыкли с rails 2.

Я попытался выяснить, как отобразить gif загрузки ajax - пока выполняется запрос ajax - в "rails 3"путь".Я придумал такой код, который использует события javascript, отправленные драйвером UJS Rails 3.В этом примере используется прототип: 

<div id="wait" style="display:none">
    <img src="/images/ajax-loader.gif"> Please wait...
</div>

<div>
    <%= link_to 'Get', 'finished', :id => "mylink", :remote => true %>
</div>

<%= javascript_tag do %>
        Event.observe('mylink', 'ajax:before', function(event) {
            $('wait').show();
        });
        Event.observe('mylink', 'ajax:complete', function(event) {
            $('wait').hide();
        });
<% end %>

Это работает хорошо, но я бы хотел, чтобы можно было записывать эти "триггеры" событий ajax с помощью прототипа и помощников сценариев, как, например, когда мы используем функцию link_to_function: 

<%= 
  link_to_function("toggle visibility") do |page|
    page.toggle "wait"
  end
%>

Есть ли способ сделать это, или мы должны написать ajax-события "триггеры" непосредственно в javascript, либо прототип, либо jquery?

С уважением,

Филипп Ланг

Ответы [ 2 ]

5 голосов
/ 13 декабря 2010

Идея UJS состоит в том, чтобы переместить код javascript из представлений в отдельные файлы js. То, как вы делаете это, побеждает эту цель. Вместо этого я считаю, что у вас должен быть js-файл с обработчиком «dom :loaded» или аналогичным, который устанавливает обработчики для обратных вызовов rails и других событий.

Что-то вроде (с использованием прототипа): 

(function () {

  $(document).on('dom:loaded', function (event) {

    $$('a[data-remote=true]').each(function (link) {
      link.on('ajax:complete', function (request) {
        // do something
      });
    });

  });

}());

Таким образом, все javascripts отделены от представления, которое является идеей ненавязчивого javascript.

0 голосов
/ 15 октября 2010

Изучив исходный код rails, я пришел к следующему решению: 

  def javascript_event_tag(name, event, &block)
    content = "Event.observe('#{name}', '#{event}', function() {"
    content = content + update_page(&block)
    content = content + "});"

    content_tag(:script, javascript_cdata_section(content))
  end

Это облегчает реакцию на события UJS: 

<div id="wait" style="display:none">
    <img src="/images/ajax-loader.gif"> Please wait...
</div>

<%= link_to 'ajax call', 'code_on_controller', :id => "mylink", :remote => true %>

<%= 
   javascript_event_tag('mylink', 'ajax:before') do |page|
     page.show 'wait'
   end
 %>
 <%= 
   javascript_event_tag('mylink', 'ajax:complete') do |page|
     page.hide 'wait'
   end
 %>

Вместо того, чтобы писать необработанный прототип или код jquery, вы можете использовать помощники rails.

...