javascript - 在 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

解决方案是使用 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 或严格模式来捕获这样的错误。