Rails-UJS 响应呈现原始 html 而不是解释的haml答案

【问题标题】：Rails-UJS response rendering raw html instead of interpreted hamlRails-UJS 响应呈现原始 html 而不是解释的haml
【发布时间】：2020-03-18 20:21:15
【问题描述】：

使用 Webpacker 的 Rails 6.0.1.2
雷宝石
哈姆尔
Rails-ujs

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

部分加载在初始页面视图上正常。它显示结果（每个结果都是从名为“rooms_card.html.haml”的部分渲染的卡片

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

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

但是，当我单击“查看更多”链接时，会发出请求并附加结果，但显示的是原始 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？

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

谢谢！

戴夫

【问题讨论】：

标签： ruby-on-rails ruby haml rails-ujs

【解决方案1】：

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

希望这会有所帮助。

【讨论】：