Rails js文件和页面特定js

在rails上，我将所有JavaScript文件放入应用程序js文件中。Rails js文件和页面特定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调用到身体。我知道我应该顺便说一句。但问题在于页面特定的JS代码。

想象一下，我有home.html.erb用户选择日期。所以我把数据代码放入这个页面。

如果我参加<%= javascript_include_tag 'application' %>成体的底部，这个时候因为没有加载的jQuery &日期选择器又那么页面的特定的JS给no method error

什么是最好的办法？

来源

2016-12-20 Shalafister' s

我猜你没有使用turbolinks？如果你不是，这意味着你正在加载每个导航的整个HTML（包括资产）。如果是这种情况，我认为如果你想提高性能，你的首要任务应该是如何只加载一次（比如像turbolinks或ajax应用程序）。 –

身体紧贴标签之前，只是后<%= javascript_include_tag 'application' %>

添加<%= yield :page_scripts %>

然后在任何地方（通常在顶部）在一个特定的视图设置你的脚本有：

<% content_for :page_scripts do %> 
    <script>alert("My nice scripts...");</script> 
<% end %>

来源

2016-12-20 20:58:14 Mat

有一个很不错的回答于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>

所以，当轨呈现body标签，现在将增加一类控制器和控制器的行动之一。

假设你有一个控制器叫做static_pages和static_pages控制器具有

def home 
end

当轨呈现视图/页首页现在它将添加到body标签类的static_pages和一类首页。

<body class="static_pages home"> 
    the home view is rendered here 
</body>

这将是一个站点范围的更改，因此，如果你去从用户的指数页/视图控制器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);

该文件必须正确引用在应用中。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."); 
});

来源

2017-07-03 23:23:37 Jeremy

你也可以看看Page-specific Javascript for Rails done right。这值得期待！

Installation

安装后。我们来看看示例代码。

var ArticlesController = Paloma.controller('Articles'); 

ArticlesController.prototype.edit = function(){ 
    // Handle edit article 
};

这意味着如果您有Articles控制器的编辑操作页面。然后只有JavaScript会被触发。这不会在其他控制器操作中触发。

来源

2017-07-11 07:00:47 AnkurVyas

欢迎您访问解决方案的链接，但请确保您的答案在没有它的情况下很有用：[添加链接的上下文]（// meta.stackexchange.com/a/8259），以便您的同行用户了解它是什么以及为什么它在那里，然后引用您链接的页面中最相关的部分，以防目标页面不可用。 [仅仅是一个链接的答案可能会被删除。]（// stackoverflow.com/help/deleted-answers） – g00glen00b

感谢@ g00glen00b的建议！ – AnkurVyas

看起来更好，但你可能想要定制这个答案来解决这个问题。现在它是一个链接+解释一些示例代码，但示例代码是否回答了这个问题？ – g00glen00b

Rails js文件和页面特定js

回答

相关问题