Частичное рендеринг после вызова ajax без помощников рельсов (используя webpack)

Question

На странице show.html.erb у меня есть список элементов:

<div id="shopOffersPartial">
   <%= render "shops/shop_offers", offers: @offers %>
</div>

В частичном есть просто цикл.@offers взято из бэкэнда

<% offers.each do |offer| %>
  <%= render "shared/mini_offer_card/content", offer: offer, shop: @shop %>
<% end %>

Я хочу отфильтровать каждый элемент key up.Для этого я слушаю вход.У меня есть логика JS в Webpack.

const shopFilterProductsInput = document.getElementById("shopFilterProducts");
const shopId = shopFilterProductsInput.dataset.shopid;
const shopOffersPartial = document.getElementById("shopOffersPartial");

const filterOfferes = (e) => {
  let inputValue = shopFilterProductsInput.value;

  const url = `/shops/${shopId}?query=${inputValue}`;

  fetch(url)
  .then(function() {
    shopOffersPartial.innerHTML = "<%= render 'shops/shop_offers', offers: @offers %>";
  })
  .catch(function() {
      // This is where you run code if the server returns any errors
  });
}

if (shopFilterProductsInput) {
  shopFilterProductsInput.addEventListener("keyup", filterOffers)
}

Мой вопрос находится в этой части кода:

fetch(url)
  .then(function() {
    shopOffersPartial.innerHTML = "<%= render 'shops/shop_offers', offers: @offers %>";
  })

Как только я получу ответ, я хочу повторно сделать частичноеу которого есть список элементов.

В rails, с .js.erb вы можете делать такие вещи:

// app/views/reviews/create.js.erb
// Here you generate *JavaScript* that would be executed in the browser
function refreshForm(innerHTML) {
  const newReviewForm = document.getElementById('new_review');
  newReviewForm.innerHTML = innerHTML;
}

function addReview(reviewHTML) {
  const reviews = document.getElementById('reviews');
  reviews.insertAdjacentHTML('beforeend', reviewHTML);
}

<% if @review.errors.any? %>
  refreshForm('<%= j render "reviews/form", restaurant: @restaurant, review: @review %>');
<% else %>
  addReview('<%= j render "reviews/show", review: @review %>');
  refreshForm('<%= j render "reviews/form", restaurant: @restaurant, review: Review.new %>');
<% end %>

Но я в файле Webpack.Я не могу использовать помощники Rails.

Как я могу отрисовать помощника Rails с помощью Webpack?

Answer 1

Этот код

  fetch(url)
  .then(function() {
    shopOffersPartial.innerHTML = "<%= render 'shops/shop_offers', offers: @offers %>";
  })

следует заменить следующим:

  fetch(url)
  .then(function(res) {
     return res.text();
  }).then(function(html) {
     shopOffersPartial.innerHTML = html;
  });

Вам не нужно использовать render в файле JS.Контроллер, к которому обращается /shops/${shopId}?query=${inputValue}, должен возвращать необходимый html.Как то так:

def show
  # offers = ???
  # ...
  respond_to do |format|
    format.html { render 'shops/show' }
    format.js { return plain: render_to_string("shops/shop_offers", offers: offers, layout: false) }
  end
end