Rails 3.1 Asset Pipeline for Javascript

Question

好的，我已經閱讀了很多有關新的Rails 3.1 Asset Pipeline的信息，但找不到我的疑問的正確答案。

我正在根據需要渲染的view＃action加載.js文件。 我這樣做是為了防止錯誤的綁定並加載小的.js文件。

候選人_機會＃索引

$(".sortable_drag_n_drop").sortable({
    update: function(event, ui) {
        $.post('/candidate_opportunities/sort', $(this).sortable('serialize'));
    },
    handle: 'span'
});

候選人_公司＃索引

$(".sortable_drag_n_drop").sortable({
    update: function(event, ui) {
        $.post('/candidate_companies/sort', $(this).sortable('serialize'));
    },
    handle: 'span'
});
$(".sortable_drag_n_drop").disableSelection();

現在最好的解決方案是什么？

• 我應該更改綁定並讓Sprockets使用//= require_tree .編譯所有.js文件//= require_tree . ？
• 還是我應該根據自己的觀點嘗試加載.js ，因此我不會以龐大的application.js結尾？

Answer 1

如果要將其更新到管道中，則有幾種選擇。 在決定時，您可能應該考慮管道應起作用的方式。

廣義上講，管道的目的是將您所有的JS合並到一個文件中，並將其壓縮/壓縮。 這樣做的目的是減少每頁的請求數量，並允許設置遠期頭，以便將資源緩存在瀏覽器或透明代理/緩存中的某個位置。

轉到選項。

1.與您現在相同。

您可以繼續做自己知道的事情。 我假設您正在使用rails助手在主布局文件中添加這些視圖JS文件。 您可以繼續對管道進行操作， 但是必須將使用的所有文件添加到預編譯數組中：

config.assets.precompile += ['candidate_opportunities.js', 'candidate_companies']

資產必須位於資產/ javascript中，但是無需分別將它們添加到清單文件中。

強烈建議您對管道使用Rails的默認值，並為生產預編譯資產。

缺點是這些頁面上的額外請求，但這僅是在應用程序負載高的情況下的問題。

2.資產管道方式（TM）

要通過管道執行此操作，您需要將這些文件移到資產/ javascript和您所說的require_tree中。

您遇到的問題是JS代碼段針對相同的類（但具有不同的發布URL），因此這行不通。 使用require_tree，文件的順序可能不是您想要的。

一個新的3.1應用程序會生成用於視圖的文件（我認為），但是期望它們將以標記中的唯一屬性（從網站角度）為目標，因為所有文件都包含在application.js中。

為了解決JS沖突的問題。 我建議您重構JS代碼段，使其更通用。 您可以在可排序對象上使用data-post-url屬性：

<ul class="sortable_drag_n_drop" data-post-url="/candidate_opportunities/sort">

然后在您的JS中收集網址。

不僅是DRYer，而且您的整體JS更少，並且可以按預期充分使用管道。

Answer 2

我對Rails資產管道感到沮喪。 也許不是整個資產流水線，但Rails組織javascript的方式確實不合邏輯。

到目前為止，Rails每個控制器都有一個單獨的javascript文件。 就邏輯組織而言，這有點好。 但是隨后資產管道將所有這些文件壓縮為一個大js文件。 因此，基本上您的js文件組織得很好，但隨后一次全部加載了它們，從而導致變量沖突，函數沖突，其他代碼沖突和其他意外行為。 因為我們作為開發人員真正想要的是執行或加載頁面特定javascript的簡單方法。

一種著名的方法是每頁僅包含一個特定的javascript文件。 是的，可以，但是如果我們要求每頁使用不同的javascript文件，那么我們不會使用資產管道所提供的性能提升。

我的解決方案是創建一個JavaScript對象，該對象包含所有特定於頁面的函數，然后在Rails執行了匹配的控制器-動作對后，提取並執行它們。 像這樣：

PageJs = {};
PageJs["users/new"] = function(){ 
  alert("I will be called when users/new action is executed");
};

基本上，這就是核心思想。 好吧，我已經實現了這個想法，並為此創建了一個瑰寶。 檢出Paloma ，了解如何在不進行復雜設置的情況下邏輯上組織js文件並執行特定於頁面的javascript。

這是有關如何使用Paloma的示例：

Javascript文件：

Paloma.callbacks['users/new'] = function(params){
  // This will only run after executing users/new action
  alert('Hello New Sexy User');
};

Rails控制器：

def UsersController < ApplicationController
  def new
    @user = User.new
    # No special function to call, 
    # the javascript callback will be executed automatically
  end
end

那只是一個簡單的例子，但是它提供了更多的東西，我相信它可以解決您的問題。 容易。

謝謝！