从 Rails 为 Ember 格式化 JSON答案

【问题标题】：Formatting JSON from Rails for Ember从 Rails 为 Ember 格式化 JSON
【发布时间】：2015-01-15 18:15:36
【问题描述】：

目前，带有 ember 前端应用程序的 Rails API 中的 JSON 对于我的图像模型格式不正确，如下所示。

这会导致 ember Chrome 工具将我的 Project_image 的数据显示为“object Object”，将 project_id 的数据显示为“null”，这在我的模板中不是很有用。

如何使用 Active_Model_Serializer 格式化 JSON 以正确输出数据。

当前 JSON 示例：

{
  "images":
    [
      {
        "id":6,
        "project_image":
          {"project_image":
            {"url":"/uploads/image/project_image/6/example_image.jpg"}
          },
        "project_id":8
      }
     ]
}

当前 image_serializer.rb

class ImageSerializer < ActiveModel::Serializer
  attributes :id, :project_image, :project_id
end

任何帮助将不胜感激！ :)

Ember 模型

图片

App.Image = DS.Model.extend({
  project_image: DS.attr('string'),
  project_id: DS.attr('number'),

  project: DS.belongsTo('project')
});

项目

App.Project = DS.Model.extend({
  client: DS.attr('string'),
  tags: DS.attr('string'),
  description: DS.attr('string'),
  start_date: DS.attr('string'),
  end_date: DS.attr('string'),

  images: DS.hasMany('image')
});

导轨模型

图片

class Image < ActiveRecord::Base
  belongs_to :project
  mount_uploader :project_image, ImageUploader
end

项目

class Project < ActiveRecord::Base
  has_many :images, :dependent => :destroy
  accepts_nested_attributes_for :images, allow_destroy: true
end

所有项目模型数据正确加载，错误仅与图像模型有关。

【问题讨论】：

Rails 中有哪些模型？形象和项目？它们之间有什么关系？
我确实有图像和项目模型。图片属于_to项目和项目has_many图片:)

标签： ruby-on-rails json ember.js ember-data active-model-serializers

【解决方案1】：

更新：我认为这样的事情会解决这个问题：

class ImageSerializer < ActiveModel::Serializer
  attributes :id, :project_image_url, :project_id

  def project_image_url
    project.image_url
  end
end

关键是将url作为字符串发送。您也可以使用名称，只需确保名称与 Ember 模型匹配即可。

您使用的是哪个版本的 active_model_serializers？我有类似的问题。根据the Readme，0.8.x 为我修复了它。

【讨论】：

我使用的是 0.9.1 版本，我之前发现需要它才能与 Rails 4.2.0 完全协作:)
刚刚尝试迁移到 0.8.0，不幸的是，这似乎完全停止了应用程序的工作并带来了新的各种错误！
我在 Rails 4.2.0 和 AMS 0.8.3 上。
{"articles": [ {"id":10818,"title":"title"}, {"id":10817,"title":"another title"} ] }跨度>
这是我上面的 API 输出。在 Ember 中，我正在扩展 ActiveModelAdapter。不幸的是，我现在需要用完，但我希望这会有所帮助。

【解决方案2】：

对于任何对该解决方案感兴趣的人，我使用了 DavidKovsky 的想法，即创建自定义方法以确保 JSON 数据以正确的格式传递。

序列化程序文件：

#app/serializers/image_serializer.rb

class ImageSerializer < ActiveModel::Serializer
  attributes :id, :_project_image, :_project_id

  def _project_image
    object.project_image.to_s
  end

  def _project_id
    object.project_id.to_i
  end

end


#app/serializers/project_serializer.rb

class ProjectSerializer < ActiveModel::Serializer
  attributes :id, :client, :tags, :description, :start_date, :end_date
  has_many :images, embed: :ids, include: true
end

Ember 模型：

#app/assets/javascripts/models/image.js

App.Image = DS.Model.extend({
  _project_image: DS.attr('string'),
  _project_id: DS.attr('number'),


  project: DS.belongsTo('project')
});

#app/assets/javascripts/models/project.js

App.Project = DS.Model.extend({
  client: DS.attr('string'),
  tags: DS.attr('string'),
  description: DS.attr('string'),
  start_date: DS.attr('string'),
  end_date: DS.attr('string'),

  images: DS.hasMany('image')
});

Ember 商店

#app/assets/javascripts/store.js

DS.RESTAdapter.reopen({
  namespace: 'api/v1'
})

App.Store = DS.Store.extend({});
App.ApplicationAdapter = DS.ActiveModelAdapter.extend({});

在 Ember 模板中的使用（使用会徽 -徽记.com）

#app/assets/javascripts/templates/project.js.emblem

each image in model.images
  img src=image._project_image

在 Ember 模板中使用车把（以防您不使用徽章）

#app/assets/javascripts/templates/project.js.hbs

{{ #each image in model.images }}
  img src="{{ image._project_image }}"
{{ /each }}

在我的 gemfile 中，我使用的是 rails '4.2.0.beta4' 和 active_model_serializers '0.8.3'

我可以看到，如果您有很多属性要转换为字符串、整数等，这种解决方法可能会变得很麻烦，但它至少在短期内确实有效。

希望这对某人有所帮助，并再次感谢 DavidKovsky 的帮助。

【讨论】：