0

我是一名 Rails 初级开发人员，最近我尝试使用 Stimulus 和 rails-ujs 从这两篇文章中重现动态搜索表单：here和here。

基本上，它是关于通过在激励控制器中提交表单查询Rails.fire，将其发送到专用的 Rails 控制器，从数据库中获取数据，然后将其发送回拦截 AJAX 响应的激励控制器。一切正常，直到显示我的部分。当我的函数接收到控制台中的数据时，我检查了控制台中的数据，我得到了一个奇怪的 Turbolinks 函数，而不是我期望的内容。我正在使用 Rails 6.1 和引导程序 5。

知道我的问题来自哪里吗？

我的控制器

class ZaagStoriesSearchController < ApplicationController

  layout false
  
  def search
    initiate_query
    render @zaag_stories
  end

  private

  def initiate_query
    query = params[:query].downcase
    if query.present? 
      @zaag_stories = ZaagStories::Search.search(query)
      authorize @zaag_stories, :show?
    end
  end
end

我的表格

<%= form_with url: zaag_stories_search_path,
                  local: false,
                  method: :post,
                  data: {search_target: "query", action: "ajax:success->search#handleResults"} do |form| %>
      <%= form.label :query, "Rechercher un titre" %>
      <%= form.text_field :query, data: {action:"input->search#search"} %>
    <% end %>

我的观点

<div class="container mt-5 wh-75 w-85" data-controller = "category-display">
  <h1 class="text-center">Mon profil</h1>
  <div class="d-flex justify-content-center my-2 flex-nowrap overflow-auto py-3" data-category-display-target="categories" id= "categories">
    <%= render @categories %>
    <button class="btn btn-secondary" data-action="click->category-display#toggleElements" data-category-display-target="button" id="category-button">
    Hide
    </button>
  </div>
  <div class="d-flex justify-content-center mb-5" data-controller= "search">
    <%= render "shared/search_form" %>
    <div class = "d-flex flex-column align-items-center mx-5" data-search-target= "results">
      <% @categories.each do |category| %>
        <h5 id="<%=category.name %>"><%= category.name %></h5>
        <%= render partial:"zaag_stories/zaag_story", collection: category.zaag_stories, as: :zaag_story %>
      <% end %>
    </div>
  </div>
</div>

我的刺激控制器：

import { Controller } from "stimulus"
import Rails from "@rails/ujs"

export default class extends Controller {
  
  static targets = ["results", "query"]

  connect() {
    console.log("Hello")    
  }

  search() {
    Rails.fire(this.queryTarget, "submit")
  }

  handleResults() {
    const [data, status, xhr] = event.detail
    this.resultsTarget.innerHtml = xhr.response
  }
}

以及我在 handleResults() 中得到的数据

function(){
          function renderWithTurbolinks(htmlContent){
            var currentSnapshot = Turbolinks.Snapshot.fromHTMLElement(document.documentElement);
            var newSpanshot = Turbolinks.Snapshot.fromHTMLString(htmlContent);
            var nullCallback = function(){};
            var nullDelegate = {viewInvalidated: nullCallback, viewWillRender: nullCallback, viewRendered: nullCallback};

            var renderer = new Turbolinks.SnapshotRenderer(currentSnapshot, newSpanshot, false);
            if(!renderer.shouldRender()){
              renderer = new Turbolinks.ErrorRenderer(htmlContent);
            }
            renderer.delegate = nullDelegate;
            renderer.render(nullCallback);
          }
          Turbolinks.clearCache();
          Turbolinks.dispatch('turbolinks:before-cache');
          renderWithTurbolinks("<div class=\"card my-3\" ...");
          window.scroll(0, 0);
          Turbolinks.dispatch('turbolinks:load');
        })();

最后，我的部分被渲染的结果

4

0 回答 0