Как асинхронно загрузить частичную страницу в рельсы

Question

При создании приложения ruby ​​на rails / jquery есть часть страницы, на создание которой уходит много времени.

Я хочу изменить способ загрузки страницы так, чтобы большая часть страницы загружалась сразу, а заполнитель был зарезервирован для трудоемкой части, чтобы загружаться асинхронно и вставляться в страницу с помощью ajax / jquery, когда она завершено.

Что у меня сейчас (упрощенно):

app / views / sample / show.html.erb:

<div id="theResult">
    <%= render :partial => 'calculate', :object => @org) %>
</div>

, а часть будет использовать некоторые части @org для генерации некоторого контента (при обращении к другой внешней службе REST).

Приложение / просмотров / образец / _calculate.html.erb

<%
    # code to take org and turn it into content
%>
<!--...html to display results here -->

Я понимаю, что это, вероятно, нарушает правильные правила архитектуры MVC, так как у моего партиала слишком много логики, и я бы тоже хотел это исправить ...

Итак, я думаю, у меня есть два вопроса в одном: (1) как мне заставить это работать, и (2) как мне это почистить, чтобы следовать хорошим практикам ruby ​​/ rails / mvc?

Answer 1

Сначала поместите пустую метку-заполнитель в основной ответ

<div id="pink-dancing-elephants"></div>

и добавьте немного jQuery на страницу

$.ajax({
    url: "/elephants/dancing",
    cache: false,
    success: function(html){
      $("#pink-dancing-elephants").append(html);
    }
});

и выполните действие, при котором ответы на / elephants / dance / pink возвращают блоб HTML, который вы хотите заполнить в div. В действии, которое вызывается запросом AJAX, вы хотите выполнить рендеринг с помощью: layout => false, чтобы не дать возвращаемому блобу HTML включить весь кадр. Э.Г.

# elephants_controller.rb
def dancing
  @elephants = #whatever
  render :layout => false
end

Это вывело бы шаблон в views / elephants / Dance.html.erb.

Answer 2

Есть более простой способ сделать это по сравнению с @ cailinanne.

Используя ее тот же пример, но я, как правило, использую эту технику для обновления div, поэтому мой div должен сначала иметь эту часть:

<div id="pink-dancing-elephants">
   <%= render "elephants/dancing", elephant: some_thing  %>
</div>

Но затем используйте метод загрузки jQuery:

$("#pink-dancing-elephants").load("/elephants/dancing");

Это вернет все частичное. Обязательно используйте layout: false, и при необходимости установите параметры. Я склонен использовать частичное, как это

# elephants_controller.rb
def dancing
  render "elephants/_dancing", 
         locals: { elephant: some_thing },
         layout: false
end

Это будет отображать шаблон в views / elephants / _dancing.html.erb.

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