javascript - 使用 Rails 3.1，您将“特定于页面”的 JavaScript 代码放在哪里？

Question

据我了解，您所有的 JavaScript 都会合并到一个文件中。//= require_tree .Rails 在添加到application.js清单文件底部时默认执行此操作。

这听起来像是一个真正的救生员，但我有点担心特定于页面的 JavaScript 代码。这段代码会在每一页上执行吗？我想要的最后一件事是为每个页面实例化我的所有对象，而这些对象只需要在一页上。

此外，是否也有可能发生冲突的代码？

或者你是否script在页面底部放置一个小标签，它只是调用一个执行页面的javascript代码的方法？

那么你不再需要 require.js 了吗？

谢谢

编辑：我很欣赏所有的答案......而且我认为他们并没有真正解决问题。其中一些是关于样式的，似乎并不相关......而其他人只是提到javascript_include_tag......我知道存在（显然......）但看起来 Rails 3.1 的前进方式是总结所有您的 JavaScript 到 1 个文件中，而不是在每个页面的底部加载单独的 JavaScript。

我能想出的最佳解决方案是用s 或es将某些功能包装在div标签中。在 JavaScript 代码中，您只需检查或是否在页面上，如果是，则运行与其关联的 JavaScript 代码。这样，如果动态元素不在页面上，JavaScript 代码就不会运行——即使它已包含在Sprockets 打包的海量文件中。idclassidclassapplication.js

我上面的解决方案的好处是，如果 100 个页面中有 8 个包含搜索框，它将仅在这 8 个页面上运行。您也不必在网站的 8 个页面上包含相同的代码。事实上，您再也不必在任何地方的网站上包含手动脚本标签。

我认为这是我问题的实际答案。

score 156 · Accepted Answer

Asset Pipeline 文档建议如何执行特定于控制器的 JS：

例如，如果ProjectsController生成了 a，则在处将有一个新文件，在处将有app/assets/javascripts/projects.js.coffee另一个文件app/assets/stylesheets/projects.css.scss。您应该将控制器独有的任何 JavaScript 或 CSS 放在它们各自的资产文件中，因为这些文件可以仅通过这些控制器加载，例如<%= javascript_include_tag params[:controller] %>或<%= stylesheet_link_tag params[:controller] %>.

链接到：asset_pipeline

score 77 · Accepted Answer

对于特定于页面的 js，您可以使用Garber-Irish 解决方案。

因此，对于两个控制器 - 汽车和用户，您的 Rails javascripts 文件夹可能如下所示：

javascripts/
├── application.js
├── init.js
├── markup_based_js_execution
├── cars
│   ├── init .js
│   ├── index.js
│   └── ...
└── users
    └── ...

并且 javascripts 看起来像这样：

// application.js

//= 
//= require init.js
//= require_tree cars
//= require_tree users

// init.js

SITENAME = new Object();
SITENAME.cars = new Object;
SITENAME.users = new Object;

SITENAME.common.init = function (){
  // Your js code for all pages here
}

// cars/init.js

SITENAME.cars.init = function (){
  // Your js code for the cars controller here
}

// cars/index.js

SITENAME.cars.index = function (){
  // Your js code for the index method of the cars controller
}

和 markup_based_js_execution 将包含 UTIL 对象的代码，以及 DOM-ready 的 UTIL.init 执行。

不要忘记把它放到你的布局文件中：

<body data-controller="<%= controller_name %>" data-action="<%= action_name %>">

我还认为最好使用类而不是data-*属性，以获得更好的特定于页面的 css。正如 Jason Garber 所提到的：特定于页面的 CSS 选择器会变得非常尴尬（当您使用data-*属性时）

我希望这能帮到您。

score 65 · Accepted Answer

我看到您已经回答了自己的问题，但这是另一种选择：

基本上，你假设

//= require_tree .

是必须的。它不是。随意删除它。在我当前的应用程序中，我第一次使用 3.1.x，老实说，我制作了三个不同的顶级 JS 文件。我的application.js文件只有

//= require jquery
//= require jquery_ujs
//= require_directory .
//= require_directory ./api
//= require_directory ./admin

这样，我可以创建带有自己的顶级 JS 文件的子目录，这些子目录只包含我需要的内容。

关键是：

您可以删除require_tree- Rails 允许您更改它所做的假设
名称没有什么特别之处application.js- 子目录中的任何文件assets/javascript都可以包含预处理器指令//=

希望对 ClosureCowboy 的回答有所帮助并添加一些细节。

苏哈尔

score 41 · Accepted Answer

另一种选择：要创建特定于页面或模型的文件，您可以在assets/javascripts/文件夹中创建目录。

assets/javascripts/global/
assets/javascripts/cupcakes
assets/javascripts/something_else_specific

您的主application.js清单文件可以配置为从global/. 特定页面或页面组可以有自己的清单，从它们自己的特定目录加载文件。Sprockets 会自动将加载的文件application.js与您的页面特定文件结合起来，从而使该解决方案能够工作。

这种技术也可以用于style_sheets/。

score 23 · Accepted Answer

我很欣赏所有的答案......而且我认为他们并没有真正解决问题。其中一些是关于样式的，似乎并不相关......而其他人只是提到javascript_include_tag......我知道存在（显然......）但看起来 Rails 3.1 的前进方式是总结所有您的 Javascript 到 1 个文件中，而不是在每个页面的底部加载单独的 Javascript。

我能想出的最佳解决方案是用s 或es将某些功能包装在div标签中。在 JavaScript 代码中。然后您只需检查或是否在页面上，如果是，则运行与其关联的 javascript 代码。这样，如果动态元素不在页面上，则 javascript 代码不会运行 - 即使它已包含在Sprockets 打包的大量文件中。idclassidclassapplication.js

我上面的解决方案的好处是，如果 100 个页面中有 8 个包含搜索框，它将仅在这 8 个页面上运行。您也不必在网站的 8 个页面上包含相同的代码。事实上，您再也不必在您的网站上任何地方包含手动脚本标签——除了可能预加载数据。

我认为这是我问题的实际答案。

score 16 · Accepted Answer

我意识到我来晚了一点，但我想提出一个我最近一直在使用的解决方案。不过，我首先要提...

Rails 3.1/3.2 方式（不，先生。我不喜欢它。）

请参阅： http: //guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline

为了完整起见，我在此答案中包含以下内容，并且因为它不是一个不可行的解决方案……尽管我不太关心它。

“Rails Way”是一个面向控制器的解决方案，而不是像这个问题的原作者所要求的那样面向视图。有以它们各自的控制器命名的特定于控制器的 JS 文件。所有这些文件都放置在默认情况下不包含在任何 application.js 要求指令中的文件夹树中。

为了包含特定于控制器的代码，将以下内容添加到视图中。

<%= javascript_include_tag params[:controller] %>

我讨厌这个解决方案，但它就在那里，而且速度很快。据推测，您可以改为将这些文件称为“people-index.js”和“people-show.js”，然后使用类似的东西"#{params[:controller]}-index"来获得面向视图的解决方案。再次，快速修复，但它不适合我。

我的数据属性方式

说我疯了，但我希望在部署时将我的所有 JS 编译并缩小到 application.js 中。我不想记住在所有地方都包含这些散乱的小文件。

我将所有 JS 加载到一个紧凑的、即将成为浏览器缓存的文件中。如果我的 application.js 的某个部分需要在页面上触发，我让 HTML 告诉我，而不是 Rails。

我没有将我的 JS 锁定到特定的元素 ID 或在我的 HTML 中乱扔标记类，而是使用了一个名为data-jstags.

<input name="search" data-jstag="auto-suggest hint" />

在每个页面上，我使用- 在此处插入首选 JS 库方法 -在 DOM 完成加载后运行代码。此引导代码执行以下操作：

遍历 DOM 中标记为的所有元素data-jstag
对于每个元素，在空间上拆分属性值，创建一个标签字符串数组。
对于每个标签字符串，在该标签的 Hash 中执行查找。
如果找到匹配的键，则运行与其关联的函数，将元素作为参数传递。

假设我在 application.js 中的某处定义了以下内容：

function my_autosuggest_init(element) {
  /* Add events to watch input and make suggestions... */
}

function my_hint_init(element) {
  /* Add events to show a hint on change/blur when blank... */
  /* Yes, I know HTML 5 can do this natively with attributes. */
}

var JSTags = {
  'auto-suggest': my_autosuggest_init,
  'hint': my_hint_init
};

引导事件将对搜索输入应用my_autosuggest_initandmy_hint_init函数，将其转换为在用户键入时显示建议列表的输入，并在输入为空且未聚焦时提供某种输入提示。

除非某些元素带有标记，否则data-jstag="auto-suggest"自动建议代码永远不会触发。但是，它总是在那里，缩小并最终缓存在我的 application.js 中，以供我在页面上需要它的时候使用。

如果您需要将其他参数传递给标记的 JS 函数，则必须运用一些创造力。添加数据参数属性，提出某种参数语法，甚至使用混合方法。

即使我有一些看起来特定于控制器的复杂工作流程，我也会在我的 lib 文件夹中为其创建一个文件，将其打包到 application.js 中，并用类似“new-thing-wizard”之类的东西标记它。当我的引导程序点击那个标签时，我漂亮的、漂亮的向导将被实例化并运行。它在需要时为该控制器的视图运行，但不以其他方式耦合到控制器。事实上，如果我的向导编码正确，我可能能够在视图中提供所有配置数据，因此以后能够将我的向导重新用于需要它的任何其他控制器。

无论如何，这就是我一段时间以来一直在实现特定于页面的 JS 的方式，它对于简单的网站设计和更复杂/丰富的应用程序都非常有用。希望我在这里介绍的两种解决方案之一，我的方式或 Rails 方式，对将来遇到这个问题的任何人都有帮助。

score 7 · Accepted Answer

很久以前就已经回答并接受了这个问题，但是我根据其中一些答案和我对 Rails 3+ 的经验提出了自己的解决方案。

资产管道很甜蜜。用它。

首先，在您的application.js文件中，删除//= require_tree.

然后在你application_controller.rb创建一个辅助方法：

helper_method :javascript_include_view_js //Or something similar

def javascript_include_view_js
    if FileTest.exists? "app/assets/javascripts/"+params[:controller]+"/"+params[:action]+".js.erb"
        return '<script src="/assets/'+params[:controller]+'/'+params[:action]+'.js.erb" type="text/javascript"></script>'
    end
end

然后在您的application.html.erb布局文件中，在现有的 javascript 包含中添加您的新助手，并以raw助手为前缀：

<head>
    <title>Your Application</title>
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= raw javascript_include_view_js %>
</head>

瞧，现在您可以使用您在 rails 中其他任何地方使用的相同文件结构轻松创建特定于视图的 javascript。只需将您的文件粘贴进去app/assets/:namespace/:controller/action.js.erb！

希望对其他人有所帮助！

score 6 · Accepted Answer

您可以在布局文件（例如 application.html.erb）中添加这一行，以自动加载特定于控制器的 javascript 文件（生成控制器时创建的文件）：

<%= javascript_include_tag params[:controller] %>

您还可以添加一行以在每个操作的基础上自动加载脚本文件。

<%= javascript_include_tag params[:controller] + "/" + params[:action] %>

只需将您的页面脚本放入以控制器名称命名的子目录中。在这些文件中，您可以使用 =require 包含其他脚本。最好创建一个帮助程序以仅在文件存在时才包含该文件，以避免浏览器中出现 404 失败。

score 6 · Accepted Answer

6

<%= javascript_include_tag params[:controller] %>

于 2013-03-21T08:34:16.330 回答

score 6 · Accepted Answer

6

也许您会发现pluggable_js gem 是合适的解决方案。

于 2013-07-25T13:22:04.470 回答

score 5 · Accepted Answer

LoadJS gem 是另一种选择：

LoadJS 提供了一种在 Rails 应用程序中加载特定于页面的 Javascript 代码的方法，而不会失去 Sprockets 提供的魔力。您的所有 Javascript 代码将继续缩小到一个 Javascript 文件中，但其中的某些部分只会在某些页面上执行。

https://github.com/guidomb/loadjs

score 3 · Accepted Answer

菲利普的回答很好。这是使其工作的代码：

在 application.html.erb 中：

<body class="<%=params[:controller].parameterize%>">

假设您的控制器名为 Projects，它将生成：

<body class="projects">

然后在 projects.js.coffee 中：

jQuery ->
  if $('body.projects').length > 0  
     $('h1').click ->
       alert 'you clicked on an h1 in Projects'

score 2 · Accepted Answer

2

只有当您告诉 Rails（而不是 Sprockets）合并它们时，JavaScript 才会合并。

于 2011-05-29T12:53:14.310 回答

score 2 · Accepted Answer

这就是我解决样式问题的方法：（请原谅 Haml）

%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
    = yield

这样我开始所有页面特定的.css.sass文件：

#post
  /* Controller specific code here */
  &#index
    /* View specific code here */
  &#new
  &#edit
  &#show

这样您就可以轻松避免任何冲突。当涉及到.js.coffee文件时，您可以初始化如下元素；

$('#post > #edit') ->
  $('form > h1').css('float', 'right')

希望这对一些人有所帮助。

score 2 · Accepted Answer

我同意您的回答，要检查该选择器是否存在，请使用：

if ($(selector).length) {
    // Put the function that does not need to be executed every page
}

（没有看到任何人添加实际的解决方案）

score 2 · Accepted Answer

您还可以将 js 分组到文件夹中，并继续使用资产管道根据页面有选择地加载您的 javascript 。

score 2 · Accepted Answer

我没有看到真正将所有内容放在一起并为您列出的答案。因此，我将尝试将meleyal、sujal（a la ClosureCowboy ）、 Ryan回答的第一部分，甚至Gal对 Backbone.js 的大胆声明……以一种简短明了的方式放在一起。而且，谁知道呢，我什至可能会满足Marnen Laibow-Koser 的要求。

示例编辑

资产/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require lodash.underscore.min
...

视图/布局/ application.html.erb

  ...
  </footer>

  <!-- Javascripts ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <%= javascript_include_tag "application" %>
  <%= yield :javascript %>

</body>
</html>

意见/foo/ index.html.erb

...
<% content_for :javascript do %>
  <%= javascript_include_tag params[:controller] %>
<% end %>

资产/javascripts/ foo.js

//= require moment
//= require_tree ./foostuff

资产/javascripts/foostuff/foothis.js.coffee

alert "Hello world!"

简要描述;简介

//= require_tree .从application.js中删除并仅列出每个页面共享的 JS。
上面在application.html.erb中显示的两行告诉页面在哪里包含 application.js 和页面特定的 JS。
上面在index.html.erb中显示的三行告诉您的视图查找一些特定于页面的 JS 并将其包含在名为“:javascript”（或您想要命名的任何名称）的命名 yield 区域中。在本例中，控制器是“foo”，因此 Rails 将尝试在应用程序布局的 :javascript yield 区域中包含“foo.js”。
在foo.js（或任何控制器名称）中列出您的页面特定 JS 。列出常用库、树、目录等。
将您的自定义页面特定 JS 保存在您可以轻松引用它的地方，与您的其他自定义 JS 分开。在此示例中， foo.js 需要 foostuff 树，因此将您的自定义 JS 放在那里，例如foothis.js.coffee。
这里没有硬性规定。随意移动东西，如果需要，甚至可以在各种布局中创建多个不同名称的屈服区域。这只是显示了向前迈出的一个可能的第一步。（考虑到我们使用 Backbone.js，我不会完全这样做。我也可能选择将 foo.js 放到一个名为 foo 而不是 foostuff 的文件夹中，但还没有决定。）

笔记

你可以用 CSS 做类似的事情，<%= stylesheet_link_tag params[:controller] %>但这超出了问题的范围。

如果我在这里错过了一个明显的最佳实践，请给我留言，我会考虑进行调整。Rails 对我来说相当新，老实说，到目前为止，我对它默认给企业开发带来的混乱以及 Rails 程序平均产生的所有流量印象不深。

score 1 · Accepted Answer

我有另一个解决方案，虽然原始对我来说很好，并且不需要任何花哨的选择性加载策略。放入您的正常文档准备功能，然后测试当前窗口位置以查看它是否是您的 javascript 用于的页面：

$(document).ready(function() {
   if(window.location.pathname.indexOf('/yourpage') != -1) {
          // the javascript you want to execute
   }
}

这仍然允许 Rails 3.x 在一个小包中加载所有 js，但不会产生太多开销或与不打算使用 js 的页面发生任何冲突。

score 1 · Accepted Answer

ryguy 的答案是一个很好的答案，即使它被否决为负分。

特别是如果您使用的是 Backbone JS 之类的东西 - 每个页面都有自己的 Backbone 视图。然后 erb 文件只有一行内联 javascript 来启动正确的主干视图类。我认为它是一行“胶水代码”，因此它的内联是可以的。优点是您可以保留“require_tree”，让浏览器缓存所有 javascript。

在 show.html.erb 中，您将拥有如下内容：

<% provide :javascript do %>
  <%= javascript_include_tag do %>
    (new app.views.ProjectsView({el: 'body'})).render();
  <% end %>
<% end do %>

在您的布局文件中，您需要：

<%= yield :javascript %>

score 1 · Accepted Answer

将所有 commom JS 文件移动到像“app/assets/javascript/global”这样的子文件夹，然后在 application.js 中，将//= require_tree .行修改为//= require_tree ./global.

现在您可以自由地将特定于控制器的 JS 放在“app/assets/javascript/”根目录中，它们不会包含在已编译的 JS 中，仅在您通过= javascript_include_tag控制器/视图调用它们时使用。

score 1 · Accepted Answer

尽管您在这里有几个答案，但我认为您的编辑可能是最好的选择。我们在团队中使用的从Gitlab获得的设计模式是 Dispatcher 模式。它的功能与您所说的类似，但是页面名称是由 rails 在 body 标记中设置的。例如，在您的布局文件中，只需包含类似（在 HAML 中）的内容：

%body{'data-page' => "#{controller}:#{action}" }

dispatcher.js.coffee然后在您的 javascripts 文件夹中的文件中只有一个闭包和一个 switch 语句，如下所示：

$ ->
  new Dispatcher()

class Dispatcher
  constructor: ->
    page = $('body').attr('data-page')
    switch page
      when 'products:index'
        new Products() 
      when 'users:login'
        new Login()

您需要在单个文件中做的所有事情（比如说products.js.coffee或login.js.coffee例如）是将它们包含在一个类中，然后将该类符号全局化，以便您可以在调度程序中访问它：

class Products
  constructor: ->
    #do stuff
@Products = Products

Gitlab 有几个这样的例子，如果你好奇的话，你可能想看看 :)

score 1 · Accepted Answer

Paloma项目提供了有趣的方法来管理页面特定的 javascript 代码。

他们文档中的用法示例：

var UsersController = Paloma.controller('Users');

// Executes when Rails User#new is executed.
UsersController.prototype.new = function(){
   alert('Hello Sexy User!' );
};

score 1 · Accepted Answer

第1步。删除 require_tree 。在您的 application.js 和 application.css 中。

第2步。在布局文件夹中编辑您的 application.html.erb（默认为 rails）。在以下标签中添加“params[:controller]”。

<%= stylesheet_link_tag    'application', params[:controller], media: 'all', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'application', params[:controller], 'data-turbolinks-track' => true %>

第三步。在 config/initializers/assets.rb 中添加一个文件

%w( controller_one controller_two controller_three ).each do |controller|
  Rails.application.config.assets.precompile += ["#{controller}.js", "#{controller}.js.coffee", "#{controller}.css", "#{controller}.scss"]
end

参考： http ://theflyingdeveloper.com/controller-specific-assets-with-rails-4/

score 0 · Accepted Answer

我还没有尝试过，但看起来以下是正确的：

如果您有一个 content_for 是 javascript（例如，其中包含真正的 javascript），sprockets 将不知道它，因此它的工作方式与现在相同。
如果你想从 JavaScript 的大包中排除一个文件，你可以进入 config/sprockets.yml 文件并相应地修改 source_files。然后，您只需在需要时包含您排除的任何文件。

score 0 · Accepted Answer

我以前使用这种方法做过： http: //theflyingdeveloper.com/controller-specific-assets-with-rails-4/。超级简单，依靠控制器来选择合适的 js 来加载。

score 0 · Accepted Answer

我将一些答案合并为：

应用助手：

module ApplicationHelper
  def js_page_specific_include
    page_specific_js = params[:controller] + '_' + params[:action]
    if Rails.application.assets.find_asset(page_specific_js).nil?
      javascript_include_tag 'application', 'data-turbolinks-track' => true
    else
      javascript_include_tag 'application', page_specific_js, 'data-turbolinks-track' => true
    end
  end
end

布局/application.html.haml：

 <!DOCTYPE html>
%html{lang: 'uk'}
  %head   
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
   bla-bla-bla
    = js_page_specific_include   
   bla-bla-bla

score 0 · Accepted Answer

第一：\\=require_tree从 application.js 中删除第二：你所有的 JS 代码必须位于/app/assets/javascritpt并且你所有的 CSS 代码必须位于/app/assets/stylesheets

score -2 · Accepted Answer

在 Ryan 的带领下，这就是我所做的-

应用程序.js.coffee

$ ->
    view_method_name = $("body").data("view") + "_onload"
    eval("#{view_method_name}()") if eval("typeof #{view_method_name} == 'function'")
    view_action_method_name = $("body").data("view") + "_"+$("body").data("action")+"_onload"
    eval("#{view_action_method_name}()") if eval("typeof #{view_action_method_name} == 'function'")

users.js.coffee（控制器特定的咖啡脚本，例如控制器：用户，操作：仪表板）

window.users_dashboard_onload = () ->
    alert("controller action called")
window.users_onload = () ->
    alert("controller called")

应用程序.html.haml

%body{:data=>{:view=>controller.controller_name, :action=>controller.action_name}}

score -3 · Accepted Answer

以下是如何做到这一点，特别是如果您不必为特定页面执行大量库，而只需或多或少地运行几百行 JS。

由于将 Javascript 代码嵌入 HTML 非常好，只需在 app/views shared.js 目录下创建并将您的页面/页面特定代码放在my_cool_partial.html.erb 中

<script type="text/javascript"> 
<!--
  var your_code_goes_here = 0;
  function etc() {
     ...
  }
-->
</script>

所以现在从你想要的任何地方你只需做：

  = render :partial => 'shared.js/my_cool_partial'

就是这样，k？

javascript - 使用 Rails 3.1，您将“特定于页面”的 JavaScript 代码放在哪里？

29 回答 29

示例编辑

简要描述;简介

笔记

Related

Reference