js.erb 不在 Rails 6 中渲染

Posted 2023-05-09

【中文标题】js.erb 不在 Rails 6 中渲染

【英文标题】：js.erb not rendering in rails 6

【发布时间】：2021-03-21 05:21:14

【问题描述】：

我在从动作渲染 .js.erb 时遇到问题。动作触发，rails 告诉我它正在渲染 js.erb，但 js 从未被渲染，并且从控制台日志中可以明显看出 js 没有渲染到浏览器的控制台。我在网上尝试了一堆解决方案，但似乎无法找出为什么 rails 会告诉我这个 js 模板正在渲染，但实际上并没有在浏览器中渲染。 我可能会错过什么？

控制器动作

def dynamic_search
    puts "WE ARE IN DYNAMIC_SEARCH"
    puts params[:q]
    client = HTTPClient.new
    string = 'call to google places api'
    @result = client.get_content(string)
    @hash = JSON.parse @result

    render "home/dynamic_search.js.erb", format: :js
  end

Rails 终端输出

  Rendering home/dynamic_search.js.erb
  Rendered home/dynamic_search.js.erb (Duration: 0.0ms | Allocations: 4)
Completed 200 OK in 479ms (Views: 0.7ms | ActiveRecord: 0.0ms | Allocations: 4613)

更新：

调用该操作的代码如下（不是 100% 正确，目前只是使用 JQuery 轻松自动完成测试调用）

document.addEventListener("turbolinks:load", function() 

    $input = $('*[data-behavior="autocomplete"]')

    var options = 
        url: function(phrase)
            console.log(phrase)
            return '/search/' + phrase
        
    

    $input.easyAutocomplete(options);
);

【问题讨论】：

你能分享dynamic_search.js.erb的代码吗？没有任何错误或任何东西只是呈现一个空白页面？您能否也提供一个您尝试过但不起作用的示例 URL？

你是怎么进入这个页面的？ dynamic_search 听起来这可能是一个您没有处理的 AJAX 调用。 Rails 显然正在呈现该页面，因此我们将需要更多详细信息来确定您的问题所在。

我在这里与贡献者合作：你能分享来自 dynamic_search.js.erb 的代码吗？它只包含一个console.log('here')。这是在从 jquery 触发的 Rails 中命中操作后呈现的。页面已加载，jquery 命中动作，动作在 rails 中呈现并期望呈现 dynamic_search.js.erb（并且 rails 报告它呈现它）。但是 javascript 从未接触过浏览器。事实上，我们无法通过 chrome 检查器在源中找到 dynamic_search.js.erb。

@jamesdlivesinatree 您实际上是在访问“/some/path/dynamic_search.js”还是从另一个页面加载的。如果另一个页面，请发布代码显示它是如何被加载的。

它正在从另一个页面加载。请参阅更新的说明。 1.用户登陆页面，将jquery脚本加载到/search/x。 2. Rails 将/search/x 路由到dynamic_search。 3 dynamic_search 呈现dynamic_search.js.erb（它有一个控制台日志和一个alert()），但在前端从未看到控制台日志或警报（仔细检查浏览器日志过滤器等）。

【参考方案1】：

easy-autocomplete 期望 dynamic_search 返回可解析的数据（JSON 或 XML）。

它实际上并没有在当前上下文中运行“dynamic_search.js.erb”中的js。这意味着“dynamic_search.js.erb”的内容需要在渲染后表示这样的对象，或者最好是 dynamic_search 操作应该直接渲染它。

例如（我假设您想将easy-autocomplete 与@result 一起使用）

def dynamic_search
    puts "WE ARE IN DYNAMIC_SEARCH"
    puts params[:q]
    client = HTTPClient.new
    string = 'call to google places api'
    @result = client.get_content(string)

    render json: @result
  end

我不确定 @result json 的实际外观，因此您可能需要在上方或下方进行额外操作。

那么js可以是：

document.addEventListener("turbolinks:load", function() 
    $input = $('*[data-behavior="autocomplete"]')
    var options = 
        url: function(phrase)
            console.log(phrase)
            return `/search/$phrase`
        
    
    $input.easyAutocomplete(options);
);

【讨论】：

这几乎行得通！ json 确实按预期呈现，但模板 (dynamic_search.js.erb) 没有呈现（rails 输出也没有告诉我们模板已被呈现。我们如何告诉它在def dynamic_search 操作中也呈现dynamic_search.js.erb？

仔细观察问题，我们确切地知道这里发生了什么：***.com/questions/37437247/rails-js-erb-not-working。难道是我们需要在表单提交中表示一些:remote => true，而不是通过/search/ + phrase调用动作？

您希望“渲染”什么？ easyAutocomplete 的 url 只是为$input 提供数据，它根本不打算更改页面的内容，而不是自动完成列表

FWIW，这里的问题是:remote => true。 Rails 表单要求 jquery 在表单提交时工作。