Rails-U JS рендеринг ответа raw html вместо интерпретированного хамла - PullRequest
Новая
       113

Rails-U JS рендеринг ответа raw html вместо интерпретированного хамла

0 голосов
/ 18 марта 2020
  • Rails 6.0.1.2 с использованием Webpacker
  • Kaminari gem
  • haml
  • Rails-u js

Я Реализация функции бесконечной прокрутки с использованием гема kaminari для разбивки на страницы и rails -u js.

Частичная загрузка отлично на начальном просмотре страницы. Он отображает результаты (каждый результат представляет собой карту, отображаемую из части с именем 'rooms_card. html .haml'

Отображение части Rooms_card по индексу. html .haml страницу как коллекцию. 

= render partial: "rooms_card", collection: @rooms, as: :room, cached: true

initial page render

Однако, когда я нажимаю ссылку «Просмотреть больше», запрос выполняется и результат добавляется, но он необработан html отображается вместо интерпретированного.

raw html appended instead of rendered

Вот код для ссылки. 

= link_to_next_page @rooms, "View More", class: "view-more-link", remote: true}

Из моего индекса. js .haml file 

document.getElementById("rooms-cards").append("#{j render(partial: "rooms/rooms_card", collection: @rooms, as: :room) }")

Мой ответ на block. Rooms_controller.rb 

    respond_to do |format|
      format.js
      format.html
      format.json { render json: @results, each_serializer: RoomSerializer }
    end

Как получить ответ на визуализацию в браузере вместо отображения необработанного html?

Я покосился на это все, что знаю. Любые идеи о том, что мне не хватает?

Спасибо!

Дейв

1 Ответ

2 голосов
/ 23 марта 2020

Если вы передадите объект String (точнее, DOMString) методу append, он будет вставлен как узел Text. Вместо этого передайте объект Node. 

const wrapper = document.createElement('div');
wrapper.innerHTML = "#{j render(partial: 'rooms/rooms_card', collection: @rooms, as: :room)}"
document.getElementById("rooms-cards").append(wrapper);

Если вы не хотите создавать дополнительный div, вы можете использовать DocumentFragment. 

const fragment = document.createDocumentFragment();
fragment.innerHTML = "#{j render(partial: 'rooms/rooms_card', collection: @rooms, as: :room)}"
document.getElementById("rooms-cards").append(fragment);

Надеюсь, это поможет.

...