Sha*_*r's 10 javascript jquery ruby-on-rails asset-pipeline
在rails上我将所有JavaScript文件放入应用程序js文件中.
//= require jquery
//= require jquery_ujs
//= require dropzone
//= require jquery.cookie
//= require toastr
//VENDOR JS BEGINS
//= require pace/pace.min
//= require modernizr.custom
//= require jquery-ui/jquery-ui.min
//= require boostrapv3/js/bootstrap.min
//= require jquery/jquery-easy
//= require jquery-unveil/jquery.unveil.min
//= require jquery-bez/jquery.bez.min
//= require jquery-ios-list/jquery.ioslist.min
//= require jquery-actual/jquery.actual.min
//= require jquery-scrollbar/jquery.scrollbar.min
//= require bootstrap-select2/select2.min
//= require switchery/js/switchery.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require jquery-isotope/isotope.pkgd.min
//= require classie/classie
//= require codrops-stepsform/js/stepsForm
//= require bootstrap-datepicker/js/bootstrap-datepicker
然后我在application.html.erb的头部调用javascript作为;
...
<head>
..
<%= javascript_include_tag 'application' %>
..
</head>
...
然后我检查网站的速度,我建议把这个JS调用到body.我知道我应该BTW.但问题在于页面特定的JS代码.
想象一下,我有home.html.erb用户选择日期的地方.所以我将datapicker代码放入此页面.
如果我<%= javascript_include_tag 'application' %>进入body的底部,这次因为jquery和datepicker还没有加载,所以页面特定的JS给出了no method error
什么是最好的方法？
在贴身标签之前和之后 <%= javascript_include_tag 'application' %>
加 <%= yield :page_scripts %>
然后在特定视图中的任何位置（通常在顶部）使用以下命令设置脚本：
<% content_for :page_scripts do %>
<script>alert( "My nice scripts..." );</script>
<% end %>
在http://brandonhilkert.com/blog/page-specific-javascript-in-rails/上有一个非常好的答案.
基本上,您希望打开app/views/layouts/application.html.erb并说服它在每次呈现页面时为您提供控制器和视图信息.为此,您需要更改正文标记
<body>
<%= yield %>
</body
至
<body class="<%= controller_name %> <%= action_name %>">
<%= yield %>
</body>
因此,当rails渲染body标签时,它将为控制器添加一个类,并为控制器中的一个动作添加一个类.
假设您有一个名为static_pages的控制器,而static_pages控制器具有
def home
end
当rails将视图/页面呈现为home时,它现在将向body标签添加一类static_pages和一类home.
<body class="static_pages home">
the home view is rendered here
</body>
这将是一个站点范围的更改,因此如果您从用户控制器转到索引页面/视图,正文标记将是:
<body class="users index">
the index view is rendered here
</body>
现在,创建一个名为vendor/assets/javascripts/jquery-readyselector.js的文件,其中包含:
(function ($) {
var ready = $.fn.ready;
$.fn.ready = function (fn) {
if (this.context === undefined) {
// The $().ready(fn) case.
ready(fn);
} else if (this.selector) {
ready($.proxy(function(){
$(this.selector, this.context).each(fn);
}, this));
} else {
ready($.proxy(function(){
$(this).each(fn);
}, this));
}
}
})(jQuery);
必须在application.js中正确引用该文件
...
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-readyselector
//= require_tree .
完成所有操作后,您可以通过针对您要测试的视图进行特定警报来测试它,如下所示:
// app/assets/javascripts/static_pages_home.js
$(".static_pages.home").ready(function() {
return alert("You should only see this on the static pages home page.");
});
// app/assets/javascripts/user_index.js
$(".users.index").ready(function() {
return alert("You should only see this on the users index page.");
});
您还可以通过不引用操作来使脚本控制器具体.
$(".users").ready(function() {
return alert("You should only see this on a users controller controlled page.");
});