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

回答

相關問題