Pjax 并在特定页面上重新加载 JavaScript

Question

我想在我的 Rails 应用程序中实现 Pjax 和 Google 地图，但我在重新加载 JavaScript 代码时遇到问题。

我的layout/application.html.erb是这样的：

<body>
  <%= render 'shared/navbar' %>
  <%= render 'shared/flashes' %>
  <div id="pjax-container">
    <%= yield %>
  </div>
  <%= render 'shared/footer' %>

  <%= javascript_include_tag "https://maps.google.com/maps/api/js?key=******************************" %>
  <%= javascript_include_tag "https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" %>

  <%= javascript_include_tag "application" %>

  <%= yield(:after_js) %>
</body>

我的地图 listings/index.html.erb 所在的文件是这样的：

<div id="map" style="width: 100%; height: 300px;"></div>

<% content_for(:after_js) do %>
  <%= javascript_tag do %>

    $(document).on('ready', function() {
      handler = Gmaps.build('Google');
      handler.buildMap({ internal: { id: 'map' } }, function(){
        markers = handler.addMarkers(<%= raw @markers.to_json %>);
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();
      });
    })
  <% end %>
<% end %>

@markers 是链接到列表的标记数组。它是在列表控制器中定义的，因此很难移动此 javascript 代码。

这个文件的 JavaScript 代码只在我重新加载这个特定页面时起作用，并且当我改变页面时它不会消失。

所以我的问题是：是否可以在 Pjax 系统的特定页面上调用包含一些 ruby 信息的 JavaScript 代码？

Answer 1

只需在 pjax 的成功函数中加载您的javascript。

Answer 2

好的，我将详细解释解决方案。 :)

在 PJAX 中，大多数时候它不会加载 Jquery 或包含在 pjax 函数外部但相同的 js。所以我们必须使用

在 pjax 函数的成功函数中加载该 js 文件

$getScript('Your js fle');

这样当 pjax 获取新页面内容时，插件也会加载并包含在内。

Pjax 并在特定页面上重新加载 JavaScript

Pjax and reloading JavaScript on a specific page

javascript

ruby-on-rails

pjax