Ruby on rails TurboLink和控制器专用资产_Ruby On Rails_Asset Pipeline_Turbolinks

Ruby on rails TurboLink和控制器专用资产

ruby-on-rails

Ruby on rails TurboLink和控制器专用资产,ruby-on-rails,asset-pipeline,turbolinks,Ruby On Rails,Asset Pipeline,Turbolinks,我修改了application.html.erb以使用特定于控制器的资产： <%= javascript_include_tag controller_name, 'data-turbolinks-track' => false %> application.html.erb： <!DOCTYPE html> <html> <head> <title>My Application</title> <%=

我修改了

application.html.erb

以使用特定于控制器的资产：

<%= javascript_include_tag controller_name, 'data-turbolinks-track' => false %>

application.html.erb

：

<!DOCTYPE html>
<html>
<head>
  <title>My Application</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag params[:controller], 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag params[:controller], 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
... other html template ...


我的申请
正确%>
正确%>
正确%>
正确%>
... 其他html模板。。。

问题是，我安装了TurboLink。当我在同一个控制器中导航时，TurboLink工作。但当我切换到另一个控制器时，TurboLink将执行完全重新加载。有什么办法可以解决这个问题吗？

TurboLink

Turbolinks获取HTML页面的

，并使用Ajax对其进行更改，使

区域保持不变

只有当您的

保持不变时，这才有效-否则如何保持不变？因此，在更改控制器页面/资产的意义上，您必须在不使用TurboLink的情况下进行完整页面更新（至少如果您使用TurboLink而不进行黑客攻击）

我建议对此进行修复，即改变控制器特定的资产结构，特别是对

区域进行尽可能少的更改

涡轮链接跟踪

阅读后，您可能会从控制器特定资产中删除

turbolinks data track

选项：

<%= javascript_include_tag controller_name, 'data-turbolinks-track' => false %>

将特定于控制器的js放入body标记中。由于turbolinks不会触及html主体，因此每次访问页面时都会重新加载这段js代码

就你而言

<body>
  <%= javascript_include_tag params[:controller] %>
  ...
</body>

在body标签中

这样，实际的特定于控件的js代码只加载一次，并在需要时触发

实施

app/assets/javascripts/site.js

var site;
if(!window.Site) {
  site = window.Site = {};
  site.controllers = {}

  site.load = function (controller) {
    if (this.controllers.hasOwnProperty(controller)) {
      this.controllers[controller].call();
    }
  };

  site.add = function (controller, fn) {
    this.controllers[controller] = fn;
  }
}

Site.add("users", function () {
  // UserController related js code
}

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require site
//= require_tree .

将控制器js包装在函数中，并将其保存到

站点

。例如，

users.js

var site;
if(!window.Site) {
  site = window.Site = {};
  site.controllers = {}

  site.load = function (controller) {
    if (this.controllers.hasOwnProperty(controller)) {
      this.controllers[controller].call();
    }
  };

  site.add = function (controller, fn) {
    this.controllers[controller] = fn;
  }
}

Site.add("users", function () {
  // UserController related js code
}

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require site
//= require_tree .

app/assets/javascripts/site.js

var site;
if(!window.Site) {
  site = window.Site = {};
  site.controllers = {}

  site.load = function (controller) {
    if (this.controllers.hasOwnProperty(controller)) {
      this.controllers[controller].call();
    }
  };

  site.add = function (controller, fn) {
    this.controllers[controller] = fn;
  }
}

Site.add("users", function () {
  // UserController related js code
}

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require site
//= require_tree .

在application.js中，将它们全部加载

app/assets/javascripts/site.js

var site;
if(!window.Site) {
  site = window.Site = {};
  site.controllers = {}

  site.load = function (controller) {
    if (this.controllers.hasOwnProperty(controller)) {
      this.controllers[controller].call();
    }
  };

  site.add = function (controller, fn) {
    this.controllers[controller] = fn;
  }
}

Site.add("users", function () {
  // UserController related js code
}

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require site
//= require_tree .

然后在布局中触发特定于控制器的js

app/views/layouts/application.html.erb

<body>
  <script>
  $(document).on("page:load", function () {
    Site.load('<%= controller_name %>');
  }
  </script>
  <%= yield %>
</body>

<body>
  <script>
  $(document).on("ready page:load", function () {
    Site.load('<%= controller_name %>.<%= action_name %>');
  }
  </script>
  <%= yield %>
</body>

app/views/layouts/application.html.erb

<body>
  <script>
  $(document).on("page:load", function () {
    Site.load('<%= controller_name %>');
  }
  </script>
  <%= yield %>
</body>

<body>
  <script>
  $(document).on("ready page:load", function () {
    Site.load('<%= controller_name %>.<%= action_name %>');
  }
  </script>
  <%= yield %>
</body>


$（文档）.on（“就绪页：加载”），函数（）{
场地荷载（'.'）；
}

相关的下面是一个有趣的视频，介绍如何为您可能喜欢观看的单页应用加载javascript、css和其他资产

OSCON 2014：Instagram.com的工作原理；皮特·亨特