用數據庫中的數據填充jquery自動填充

我正在使用jQuery Autocomplete與類別，我已經使用了可以正常工作的演示代碼，現在我正嘗試使用我的數據庫中的數據填充下拉列表。我用這個代碼，我的觀點中：用數據庫中的數據填充jquery自動填充

:javascript 
    $(function() { 
     var data = [ 
      - Datasheet.find(:all).each do |ds| 
      { label: "#{ds.title}", category: "Data Sheets" }, 
      - Brochure.find(:all).each do |br| 
      { label: "#{br.title}", category: "Brochures" }, 

     $("#search").catcomplete({ 
      delay: 0, 
      source: data 
     }); 
    });

，但我得到的錯誤undefined local variable or method 'ds' for #<#<Class:0x00000005c95a18>:0x00000005c8d570>

我不知道這是否是因爲我是混合HAML使用javascript？有沒有另外一種方法呢？我所看到的只是一個名爲search的文本字段，它可以與演示代碼一起使用。

來源

2012-11-30 user1738017

哪些文件是你在編寫這些代碼可以請你展示完整的代碼，在範圍內 – Ross

這一點。在它所指的窗體的haml視圖中！ – user1738017

我想你更新了演示代碼的問題，請顯示你正在嘗試的代碼，以便人們可以幫助 – Ross

過濾器內部的代碼（如:javascript）不視爲Haml，它只是通過過濾器獲得的字符串，因此-和=不像Haml其餘部分那樣工作。不過，您可以使用插值（即#{...}塊）。事實上，這就是導致你的錯誤的原因 - 在"#{ds.title}" Haml試圖評估ds，但不是在傳遞給Datasheet.find的塊的上下文中。

#{}塊可以跨越多行，所以你可以更改您的代碼是這樣的：

:javascript 
    $(function() { 
     var data = [ 
      #{ 
      (Datasheet.find(:all).map do |ds| 
      "{ label: \"#{ds.title}\", category: \"Data Sheets\" }" 
      end + 
      Brochure.find(:all).map do |br| 
      "{ label: \"#{br.title}\", category: \"Brochures\" }" 
      end).join(',') 
      } 
     ]; 

     $("#search").catcomplete({ 
     delay: 0, 
     source: data 
     }); 
    });

這裏，而不是使用each遍歷每個我們使用map創建一個新的數組，然後使用+將兩個數組添加到一起，最後使用join(',')將它們組合成插入頁面的單個字符串。

但是，這是一個相當醜陋，笨拙的代碼。在這種情況下，更好的解決方案是將創建數組的代碼抽取出來，然後從Haml調用幫助器。

助手：

def datasheet_array 
    Datasheet.find(:all).map do |ds| 
    "{ label: \"#{ds.title}\", category: \"Data Sheets\" }" 
    end 
end 

def brochure_array 
    Brochure.find(:all).map do |br| 
    "{ label: \"#{br.title}\", category: \"Brochures\" }" 
    end 
end 

def array_for_js 
    "[#{(datasheet_array + brochure_array).join(',')}]" 
end

然後你Haml的可能是更加清晰：

:javascript 
    $(function() { 
     var data = #{array_for_js}; 

     $("#search").catcomplete({ 
     delay: 0, 
     source: data 
     }); 
    });

來源

2012-12-01 14:15:44 matt

用數據庫中的數據填充jquery自動填充

回答

相關問題