根据我的理解,所有的JavaScript都合并到一个文件中。Rails在添加//= require_tree时默认这样做。到你的application.js manifest文件的底部。

这听起来像是一个真正的救星,但我有点担心特定于页面的JavaScript代码。这段代码是否在每一页上执行?我想要的最后一件事是当我的所有对象只在1页上需要时,为每一页实例化它们。

此外,代码是否也有可能发生冲突?

还是在页面底部放置一个小的脚本标记,只调用一个执行页面javascript代码的方法?

你不再需要require.js了吗?

谢谢

编辑:我很感激所有的答案…我认为他们并没有真正解决问题。其中一些是关于样式的,似乎没有关联……其他人只是提到javascript_include_tag…我知道这是存在的(很明显…),但Rails 3.1的前进方式似乎是将所有JavaScript打包到一个文件中,而不是在每个页面的底部加载单个JavaScript。

我能想到的最好的解决方案是用id或类将某些特性包装在div标签中。在JavaScript代码中,只需检查id或类是否在页面上,如果在,则运行与之关联的JavaScript代码。这样,如果动态元素不在页面上,JavaScript代码就不会运行——即使它包含在由Sprockets打包的庞大application.js文件中。

我上面的解决方案的好处是,如果一个搜索框包含在100个页面中的8个页面上,那么它将只在这8个页面上运行。你也不需要在网站的8个页面上包含相同的代码。事实上,您再也不需要在站点的任何地方包含手动脚本标记。

我想这就是我问题的真正答案。


当前回答

首先:从application.js中删除\\=require_tree 第二:你所有的JS代码必须在/app/assets/ javascript和你所有的CSS代码必须在/app/assets/stylesheets

其他回答

这是我如何解决样式问题:(原谅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')

希望这能有所帮助。

我还没有尝试过这个方法,但看起来下面的方法是正确的:

如果你有一个content_for是javascript(例如与真正的javascript在里面),链轮将不知道它,因此这将以同样的方式工作,因为它现在。 如果你想从javascript包中排除一个文件,你可以进入config/sprockets。并相应地修改source_files文件。然后,您只需在需要的地方包括您排除的任何文件。

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

所以你的Rails javascripts文件夹对于两个控制器(cars和users)是这样的:

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

javascript是这样的:

// 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就绪的UTIL上。初始化执行。

别忘了把这个放到你的布局文件中:

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

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

我希望这对你有所帮助。

我同意你的回答,检查选择器是否存在,使用:

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

(没有看到有人添加实际的解决方案)

资产管道文档建议如何做特定于控制器的JS:

例如,如果生成了一个ProjectsController,则会在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