Rails, гем render_async: как использовать render_async внутри партиала, который загружается через ajax - PullRequest
Новая
       26

Rails, гем render_async: как использовать render_async внутри партиала, который загружается через ajax

0 голосов
/ 16 октября 2018

Проблема

Я использую гем "render_async" для асинхронной визуализации контента.

Когда я захожу на страницу типа localhost:3000/people, контент отображается асинхронно, как и ожидалось.

Однако содержимое не отображается асинхронно, если оно находится внутри части, загруженной через ajax.Я не понимаю, почему это не работает, и я не знаю, как это исправить.

Как я могу использовать render_async, если он находится внутри партиала, загруженного через ajax?

gem render_async: https://github.com/renderedtext/render_async

Что работает

Когда я вызываю индексную страницу как localhost:3000/people, render_async работает как положено.

Вот код, который работает:

people / index.html.erb 

<h1>People</h1>
...
    <div class="people">
        <%= render partial: "people/show", collection: people, as: :person %>
    </div>

Внутри people-div загружается частичный _show.html.erb.

people / _show.html.erb 

<h1>Person</h1>
...
 <%= render_async render_shared_path(parent_type: "Person", parent_id: person.id), 'data-turbolinks-track': 'reload', error_message: '<p>Sorry, users loading went wrong :(</p>' do %>
      Shared lädt!
 <% end %>

Этот код работает должным образом.render_async загружает часть с именем _children.html.erb.Когда пользователь посещает people / index.html.erb, все _children-partials загружаются асинхронно.

Что не работает

На people / index.html, когда пользователь нажимает кнопку, people -div перезагружается через ajax.Вот как перезагружается div людей: 

var people_div = ".people";

$( people_div ).fadeOut( "fast", function() {

    content = $("<%= escape_javascript( render 'people/people', people: @people ) %>")

    $(people_div).replaceWith(function(){
      return $(content).hide().fadeIn("fast");
    });

});

Код, который перезагружается, такой же, как в people / index.Изменяются только параметры.

После перезагрузки people-div контент не обрабатывается асинхронно._Children-partials не загружается. В консоли rails или в веб-консоли нет сообщений.

Единственное, что видно, это заполнитель: "Shared lädt!".

В чем может быть проблема?

Код

_show.html.erb 

    <%= render_async render_shared_path(parent_type: "Person", parent_id: person.id), 'data-turbolinks-track': 'reload', error_message: '<p>Sorry, users loading went wrong :(</p>' do %>
      Shared lädt!
    <% end %>

rout.rb 

  #render
  get '/render_shared', to: 'render#render_shared', as: 'render_shared'

render_controller.rb 

  def render_shared
    parent_type = params[:parent_type]
    parent_id = params[:parent_id]

    @parent = parent_type.singularize.classify.constantize.find(parent_id)

    render partial: "shared/children"

  end

_children.html.erb 

<% parent = parent || @parent %>

<div class="shared-<%=parent.class.name.downcase%>-<%=parent.id%>">
  <p>
    <a class="btn btn-link btn-sm" data-toggle="collapse" href=".address-<%= parent.id %>-<%= parent.class.to_s.downcase %>" role="button" aria-expanded="false" aria-controls="collapseExample">
      <%= fa_icon "address-card" %> Adresse anzeigen
    </a>
  </p>

  <div class="collapse mb-2 address-<%= parent.id %>-<%= parent.class.to_s.downcase %>" >
    <%= render "addresses/show", address: parent.address %>
  </div>

</div>

application.html.erb 

  <head>
    <title>MyApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= content_for :render_async %>
  </head>

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

После более подробного изучения этой проблемы проблема, по-видимому, связана с частью Vanilla JS в render_async.Vanilla JS не оценивает теги сценария, которые исходят из ответа родительского render_async.

В качестве быстрого исправления , я предлагаю вам попробовать использовать часть jQuery render_async, так как он действительно оценивает сценарийтеги.Вы можете включить jQuery, выполнив: 

RenderAsync.configure do |config|
  jquery = true # This will render jQuery code, and skip Vanilla JS code
end

Объяснение

Когда вы пытаетесь отобразить вложенный фрагмент, render_async загружает код JS внутри тега сценария, который необходимо оценить для выполнения другого запроса.,В jQuery есть мощный метод .replaceWith(text), который оценивает любые теги сценария в текстовой переменной.Это не так просто достичь в простой JS.Я пытаюсь найти решение для этого.

Если у кого-то есть идеи, как этого добиться, вы можете внести свой вклад в эту проблему GitHub https://github.com/renderedtext/render_async/issues/30

0 голосов
/ 16 октября 2018

Я думаю, что проблема здесь в том, что код JavaScript render_async не запускается, потому что для его запуска используется DOMContentLoaded или $ (document) .ready ().

В вашем случае эти события запускаются до на страницу загружается вложенный JavaScript-код render_async.

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

Кроме того, была поднята похожая проблема.в выпусках https://github.com/renderedtext/render_async/issues/70

...