Question

我想在我的应用程序中使用turbolinks，但是我对在application.js中使用'require_tree'犹豫不决，原因是我有特定的代码应该只在特定的控制器中加载。

如果我将require_tree从application.js中删除，则根本不会加载任何coffescripts，这会自动使它们无效。

我很难理解turbolinks是如何工作的，所以如果这是一个非常愚蠢的问题，请原谅我。

感谢。

编辑：示例：

我有3个控制器，用户，产品和销售。每个控制器都有自己的.js.coffee文件，其代码仅与其控制器有关。

users.js.coffee：

$ ->
  $('#d_table').dataTable
    sPaginationType: "bootstrap"
  $('[data-behaviour~=datepicker]').datepicker
    format: 'dd/mm/yyyy'

products.js.coffee

$ ->
  $('#r_chart').highcharts
    chart:
      type: 'spline'

sales.js.coffee

$ ->
  $("#r_chart").highcharts
    chart:
      type: "column"

如果我在application.js中启用require_tree和turbolinks，则会引发异常，因为我将两个事件绑定到#r_chart（如预期的那样），但它们排序“工作”，尽管有很多错误（这是完全不同的另一天的情况）。

如果我禁用require_tree但启用了turbolinks，则不会加载任何js.coffee文件，因此不会从jQuery触发任何事件。

如果我禁用require_tree和turbolinks，应用程序将按预期工作。每个控制器单独加载js.coffee文件，并在调用时触发所有事件。

-

我要做的是拥有第三种方案，其中启用了turbolinks，但js.coffee文件是按控制器单独加载的（而不是与require_tree一起加载）。

Answer 1

我很难理解turbolinks的运作方式

Turbolinks是一个Javascript库，旨在提高您的应用效率：

Turbolinks可以更快地在您的Web应用程序中建立以下链接。而不是让浏览器重新编译JavaScript和CSS 在每个页面之间进行更改，它会使当前页面实例保持活动状态只替换头部的正文和标题。想想CGI vs 持久的过程。

它的工作原理是重新加载网页的<body>标记，保留<head>标记不变 - 限制要请求的数据量＆amp;每次渲染。

Turbolinks的问题在于你的javascript常常失去了绑定＆＃34;使用DOM中的元素 - 意味着您必须使用Turbolinks event hooks或Javascript delegation中的一些来使JS正常工作：

#app/assets/javascripts/application.js
var your_function = function() {
  // ... your functionality
}

$(document).on("page:load ready", your_function);

-

以控制器为中心的资产

如果您要加载以控制器为中心的资产，它不会成为Turbolinks或require_tree的问题 - 这将是您如何加载所需文件的问题。< / p>

我建议您在布局中使用controller_name helper，如下所示：

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag  "application", controller_name, media: "all", "data-turbolinks-track" => true %>

这将允许您仅加载布局中特定于控制器的资产，将每个资源都排除在require_tree指令之外。

require_tree只是sprockets系统的一部分，可以将其他文件包含到主application.___资产文件中。如果您不想在application文件中包含其他特定于控制器的文件，只需单独加载它们即可。使用config.assets.precompile选项管理它们：

#config/environments/production.rb
config.assets.precompile += ["your.css", "controller.css", "files.css"]

<强>修正

也许您遇到的问题与元素的绑定有关吗？

您正在使用匿名函数启动对DOM加载的绑定 - 也许您最好使用Turbolinks events对其进行排序：

#app/assets/javascripts/application.js
var loading = function() {
   //highcharts stuff here
}

$(document).on("page:load ready", loading);

Answer 2

您无需使用require_tree。您可以单独要求每个javascript：

//= require turbolinks
//= require some_other_file

更多here in the section 2.2.1 Search Paths。

是否可以在不使用require_tree的情况下使用turbolink？

2 个答案: