Question

我有两个模型，Project和Image，它们具有has_many关系（项目有很多图像）。我在前端使用Rails作为API和Ember。

我遇到的问题是我无法将图像数据传递给余烬。

我有以下设置：

Rails结束

应用程序/模型/ image.rb

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

应用程序/模型/ project.rb

class Project < ActiveRecord::Base

  has_many :images, :dependent => :destroy
  accepts_nested_attributes_for :images, allow_destroy: true

end

应用程序/串行器/ image_serializer.rb

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

应用程序/串行器/ project_serializer.rb

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

Ember结束

应用程序/资产/ Javascript角/ store.js

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

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

应用程序/资产/ Javascript角/路由/ projects.js

App.ProjectsRoute = Ember.Route.extend({
  model: function() { 
    return this.store.find('project') 
  }
})

App.ProjectRoute = Ember.Route.extend({

  model: function(params) { 
    return this.store.find('project', params.project_id) 
  }
})

应用程序/资产/ Javascript角/模型/ 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',  {async: true})
});

应用程序/资产/ Javascript角/模型/ image.js

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

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

我访问localhost时得到的JSON输出：3000 / api / v1 / projects.json是

{
  "project":
    {
      "id":8,
      "client":"example client",
      "tags":"example tag",
      "description":"some description",
      "start_date":"April 13",
      "end_date":"June 13",
      "images":[
        {
          "project_image":
            {
              "project_image":{"url":"/uploads/image/project_image/6/logo.jpg"}
            },
              "project_id":8
         }
       ]
     }
   }

我很确定这里的格式是错误的，因为图像数据没有进入chrome ember检查器（项目数据工作正常，除了没有图像）。

如果有人对我在哪里遇到错误有任何想法，我将不胜感激！

Answer 1

您的输出JSON可以采用以下格式：

{
  "project": {
    "id": 8,
    "client": "escapethecity",
    "tags": "Wireframing, UI Design",
    "description": "",
    "start_date": "April 13",
    "end_date": "June 13",
    "images": [1],
  },
  "project_image": {
    "id": 1,
    "url": "/uploads/image/project_image/6/Eagle_logo_v7_no_tail.jpg",
    "project_id": 8
  }
}

因此，首先需要指定图像的id。然后，您可以通过id属性（project）中的"images": [1]数组和单独的project_image属性重组代码对于project中引用的所有项目图像。

此外，如果您在一个请求中提供所有信息，则无需在关系中声明async: true。

我希望它有所帮助：）

请注意，它是其中一个选项。您还可以查看DS.ActiveModelSerializer; here's a nice explanation

编辑：

我尝试使用序列化程序（虽然它只是干写，但可能输入错误！）：

export default DS.RESTSerializer.extend({
  normalizePayload: function(payload) {

    // transform the project image
    payload.project_image = payload.project.images.map(function(image) {
      return {
        id: 1, // fake one!
        url: image.project_image.project_image.url,
        project_id: image.project_id,
        project: image.project_id
      };
    });

    // create project images ids (from the fake ones now...)
    payload.project.images = payload.project_image.map(function(image) {
      return image.id;
    });
  }
});

Ember和Rails有很多关系

1 个答案: