0
  • Rails 6.0.1.2 使用 Webpacker
  • 雷宝石
  • 哈姆
  • Rails-ujs

我正在使用 kaminari gem 进行分页和 rails-ujs 实现无限滚动功能。

部分加载在初始页面视图上很好。它显示结果（每个结果都是从名为“rooms_card.html.haml”的部分呈现的卡片</p>

将 index.html.haml 页面上的 rooms_card 部分呈现为集合。

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

初始页面渲染

但是，当我单击“查看更多”链接时，会发出请求并附加结果，但它是显示的原始 html 而不是解释的。

原始 html 附加而不是渲染

这是链接的代码。

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

从我的 index.js.haml 文件

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

我对阻止的回应。rooms_controller.rb

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

如何获得响应以在浏览器中呈现而不是显示原始 html？

我一直眯着眼睛看着这个，我知道怎么做。关于我所缺少的任何想法？

谢谢！

戴夫

4

1 回答 1

3

如果您将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);

希望这可以帮助。

于 2020-03-23T07:01:11.457 回答