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

Question

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

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

с этим:

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

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

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

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

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

Если последний, пожалуйста, опишите наилучший подход (можно использовать вариант ?).

Answer 1

Я не уверен на 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 события, инициированные водителей Rails UJS (здесь я использую 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).

Answer 2

в представлении 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))%>"); 

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

Answer 3

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

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

EDIT:

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

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

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