javascript - Ember 和 Rails has_many 关系

Question

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

我遇到的问题是我无法将图像数据传递给 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 结束

应用程序/ Assets /javascripts/store.js

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

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

应用程序/ Assets /javascripts/routes/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) 
  }
})

应用程序/ 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',  {async: true})
});

应用程序/ Assets /javascripts/models/image.js

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

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

当我访问 localhost:3000/api/v1/projects.json 时，我从中得到的 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
         }
       ]
     }
   }

我很确定 ember 的格式是错误的，因为图像数据没有进入 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。然后，您可以通过在 project 属性中获取 id 数组的方式重构代码 ("images": [1])以及 project 中引用的所有项目图像的单独的 project_image 属性。

此外，如果您在一个请求中提供所有信息，则无需在关系中声明 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;
    });
  }
});