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

Question

Rails 6.0.1.2 使用 Webpacker
雷gem
哈姆
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

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

这是 link 的代码。

= 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？

我每次都会眯着眼睛看这个。关于我遗漏的任何想法？

谢谢！

戴夫

Answer 1

如果您将 String（准确地说是 DOMString）对象传递给 append method, it will be inserted as a Text node. Pass a 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);

希望对您有所帮助。

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

Rails-UJS response rendering raw html instead of interpreted haml

ruby

haml

ruby-on-rails

rails-ujs