Использование ненавязчивого JavaScript для обновления элемента - PullRequest
Новая
       14

Использование ненавязчивого JavaScript для обновления элемента

2 голосов
/ 29 июня 2010

Как вы знаете, когда вы обновляетесь с Rails 2 до 3, вы заменяете это: 

link_to_remote "more", :url => {...}

на это: 

link_to "more", {...}, :remote => true

Но как вы справляетесь с опцией: update вlink_to_remote?В Railscast # 205 Райан Бейтс демонстрирует link_to с :remote и ответом сервера, включающим код JavaScript для обновления определенного элемента на странице, но эта практика мне кажется неправильной.Я хочу, чтобы ответ моего сервера был простым HTML-фрагментом, который легко тестировать и который может использоваться разными страницами (клиентами) по-разному.Я не думаю, что сервер должен знать идентификатор целевого элемента на запрашивающей странице, поскольку он связывает действие со страницей (мини-клиент) и, следовательно, делает его менее общим (он также выглядит уродливее, чем чистый HTML).ответ).

Итак, чтобы быть точным, есть ли способ сделать что-то вроде этого: 

link_to_remote "more", :url => {...}, :update => "products-list"

с Rails 3 и UJS?Или мне нужно написать JavaScript, чтобы захватить ответ сервера HTML и вставить его в нужный элемент на странице?

Если последний, опишите лучший подход (можно link_to 's :remote опция будет использоваться вообще?).

Ответы [ 3 ]

2 голосов
/ 20 июля 2010

Я не уверен на 100%, что это Rails-одобренный способ сделать это, но я нашел решение, которое работает и кажется довольно чистым. Допустим, у нас есть страница со списком десяти самых популярных продуктов в нашей базе данных. В конце ссылка для загрузки всех оставшихся продуктов через AJAX: 

<ul id="products-list">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  ...
</ul>
<%= link_to "more...", "/products/all", :id => "load-more", :remote => true %>

Сервер возвращает простой HTML (чтобы ссылка могла использоваться на многих страницах и не была привязана к определенным идентификаторам DOM). Мы используем события ajax:x, запускаемые драйверами UJS Rails (здесь я использую jQuery), чтобы получить ответ сервера и вставить его в нужный элемент на странице: 

<%= javascript_tag do %>
  $("#load-more").bind("ajax:complete", function(et, e){
    $("#products-list").html(e.responseText);
  });
<% end %>

При желании мы также можем использовать событие ajax:loading, чтобы показать «счетчик»: 

<%= javascript_tag do %>
  $("load-more").bind("ajax:loading", function(et, e){
    $(this).hide();
    $("#products-spinner").show();
  });
<% end %>

Драйверы Rails UJS также запускают четыре других события: ajax:success, ajax:failure, ajax:before и ajax:after. См. Драйвер, включенный в ваше приложение (public / javascripts / rails.js) для получения дополнительной информации.

1 голос
/ 29 июня 2010

в представлении js /apps/views/product/index.js.erb вы можете написать код JS, например:

прототип: 

$("products-list").update("<%= escape_javascript(render(@products))%>");

JQuery: 

$("products-list").html("<%= escape_javascript(render(@products))%>");

или 

$("products-list").append("<%= escape_javascript(render(@products))%>");

и он будет выполнен при успешном запросе

0 голосов
/ 02 июля 2010

да, вы можете применить последний подход (написать собственный JS, чтобы получить ответ сервера), используя link_to: remote .

Вы также можете получить ответ json, а затем обновить данные на странице с помощью JS. в любом случае, не забудьте визуализировать только часть, а не всю страницу.

EDIT:

пример кода, он должен вызывать AJAX при нажатии чего-либо с идентификатором «more», а затем обновлять элемент # product-list на странице: 

 $("#more").click(function() {
 // make a POST call and replace the content
    $.post(, function(data) {
      $("#products-list").html(data);
    });
  });

вам не нужно больше кода, и вы можете написать некоторый помощник для генерации этого JS, вместо того, чтобы писать код в представлении. Кстати, это еще UJS

...