在Rails應用程序中使用json對象的更好方法

Question

在我的Rails應用程序中，我有許多類別擁有許多客戶端。它也支持切換語言。

這些類別顯示在應用程序的導航中，我想製作一個包含該類別客戶端的自定義下拉菜單。當用戶將鼠標懸停在某些類別上時，它將被創建。

我已經創建了一個新的資源來完成提取屬於懸停類別的客戶端的工作，但由於國際化，我無法使這些客戶端鏈接。

這是JavaScript代碼：

$(function() { 
    $(".nav_category").hover(function() { 
     category_dropdown = $(this).children(".category_dropdown"); 
     clients_from_category = category_dropdown.children(".clients_from_category"); 
     category_dropdown.toggle(0, "hidden"); 

     $.get($(this).data("url"), function(response) { 
      client_name = response[0]['translations'][0]['name']; 
      client_picture = response[0]['pictures'][0]['image']['thumb']['url']; 

      html = "<a href='/clients/"+response[0]['id']+"' class='nearest_client'>"; 
      html += "<img src='" + client_picture +"'>"; 
      html += client_name; 
      html += "</a>"; 

      clients_from_category.html(html); 
     }); 
    }, function() { 
     $(this).children(".category_dropdown").toggle(0, "hidden"); 
    }) 
}); 

這裏的問題是，我得到這樣的鏈接顯示：

<a href="/clients/157" class="nearest_client"> 
    <img src="/uploads/picture/image/361/thumb_image.jpg">Client name 
</a> 

公告沒有設置語言環境。它應該是這樣的：

<a href="en/clients/157"> 

有沒有辦法達到設置的區域設置？ 或者我以不良的方式處理這個問題？什麼是在div上設置偵聽器並從返回的JSON對象創建所需DOM元素的更好方法？

Answer 1

Maxcal對於他建議使用ActiveModel :: Serializers確實很有幫助，但是在我做了必要的更改之後，API部分中的很多其他資源都停止了正常工作。

有關此速戰速決我使用其他數據屬性，我傳遞給JavaScript：

html = "<a href='"+ $(this).data("language") + '/clients/' + response[0]['id']+"' class='nearest_client'>"; 

Answer 2

該解決方案是使用Rails鏈接助手將URL或路徑添加到JSON輸出。

如果您正在使用的JBuilder（這是默認安裝）：

# /app/clients/views/show.json.jbuilder 
json.id @client.id 
json.name @client.name 
json.path client_path(@client) 
json.url client_url(@client) 

但我會建議使用ActiveModel::Serializers：

class ClientSerializer < ActiveModel::Serializer 
    attributes :id, :name, :path, :url 

    def url 
    client_url(object) 
    end 

    def path 
    client_path(object) 
    end 
end 

基本使用說明，請參閱the RailsCast。

那麼你可以使用它在你的JavaScript像這樣：

$(function() { 
    $(".nav_category").hover(function() { 
     var category_dropdown = $(this).children(".category_dropdown"); 
     var clients_from_category = category_dropdown.children(".clients_from_category"); 
     var category_dropdown.toggle(0, "hidden"); 

     $.get($(this).data("url"), function(response) { 
      var client = response[0]; 
      var client_name = client['translations'][0]['name']; 
      var client_picture = client['pictures'][0]['image']['thumb']['url']; 
      var html; 

      html = "<a href='+ client.url +' class='nearest_client'>"; 
      html += "<img src='" + client_picture +"'>"; 
      html += client_name; 
      html += "</a>"; 
      clients_from_category.html(html); 
     }); 
    }, function() { 
     $(this).children(".category_dropdown").toggle(0, "hidden"); 
    }) 
}); 

在一個側面說明 - 你需要在JavaScript聲明變量時使用var關鍵字。否則，它們被創建爲全局變量，這是一件非常糟糕的事情。使用JSLint或嚴格模式來捕捉像這樣的錯誤。