从 Rails 为 Ember 格式化 JSON

Question

目前，我的 rails API 和 ember 前端应用程序中的 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')
});

Rails 型号

图片

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

所有项目模型数据加载正确，错误仅出现在图像模型上。

Answer 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 是什么版本？我有类似的问题。 0.8.x 根据 the Readme.

为我修复了它

Answer 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 模板中的用法（使用标志 - emblemjs.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 的帮助。

从 Rails 为 Ember 格式化 JSON

Formatting JSON from Rails for Ember

json

ruby-on-rails

ember.js

ember-data

active-model-serializers

序列化器文件：

Ember 型号：

Ember商店

Ember 模板中的用法（使用标志 - emblemjs.com）

在 Ember 模板中使用车把（如果您不使用标志）