json - Ember Cli 和 ASP.NET webapi - 连接数据

Question

我有一个在 localhost:4200 上运行的 Ember Cli 项目和一个在 localhost:56967 上运行的 asp.net webapi 项目。这两个项目单独运行良好:我可以启动我的 Ember 应用程序并测试几条路线，看起来不错，我可以访问我的 api(例如:api/products)并看到我的响应。

我遇到的问题是将这两件事联系起来。

适配器

 export default DS.RESTAdapter.extend({
      host: 'http://localhost:56967',
      namespace: 'api'
 });

我首先遇到了一些 Cors 问题，但我修复了我的 Ember 应用程序中的 contentSecurityPolicy 并在我的 Api 上启用了 Cors。

当我转到产品路线时，我可以看到对 Api 的请求被接受并且 Api 回复了 Json 答案。但是，我未能序列化该模型，因此无法在我的 Ember 应用程序中使用它。

这是我对 Api 的回应

  [{"ProductId":1,"Name":"Product 1","Description":"Category 1"},{"ProductId":2,"Name":"Product 2","Description":"Category 2"},{"ProductId":3,"Name":"Product 3","Description":"Category 3"}] 

产品的 Ember 模型

export default DS.Model.extend({
    name : DS.attr('string'),
    description: DS.attr('string')
});

产品的 Asp.net 模型:

public class Product
{
    public int ProductId { get; set; }
    [Required]
    public string Name { get; set; }
    public string Description { get; set; }
}

我知道我必须序列化 Api 响应以使其成为我的 Ember 应用程序的“可读”Json。现在的问题是:更改 Api 上的格式是否更好？或者做一个好的序列化器？我将如何制作序列化程序？很难找到一些像样的教程。我试过了，但没有用:

 export default DS.RESTSerializer.extend({
      primaryKey: 'productId'
  });

这是我遇到的错误:

  Error while processing route: products No model was found for '0' Error: No model was found for '0'

编辑在尝试了建议的序列化器和一些 ASP.NET 序列化器之后，我仍然无法让它工作。今天我找到了这个项目:http://jsonapi.codeplex.com/ .它是一个 Nuget 包，可帮助您的 ASP.NET API 的输出符合 json.api 标准。我很快就可以使用我的 Ember 数据了。只需在您的其余适配器中添加正确的 header ，如下所示:

 import DS from 'ember-data';

 export default DS.RESTAdapter.extend({
       host: 'http://localhost:57014',
       namespace: 'api',
       headers:{
          "Accept": "application/vnd.api+json"
        }
 });

然后在您的 Asp.net 模型中添加

[JsonObject(Title="product")]
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

}

它将使您的输出复数化为:

{
"products": [
    {
        "id": "1",
        "name": "Product 1",
        "description": "Category 1"
    },
    {
        "id": "2",
        "name": "Product 2",
        "description": "Category 2"
    },
    {
        "id": "3",
        "name": "Product 3",
        "description": "Category 3"
    }
]
}

它仍处于 Alpha 状态，但看起来很有希望。关于复数的小提示:它只是将 -s 添加到您的型号名称中，请记住这一点。

Answer 1

主要问题是 Asp Web API 返回以下响应:

[
  {
    "ProductId":1,
    "Name":"Product 1",
    "Description":"Category 1"
  }
]

但 Ember Data 期望服务器以以下格式响应:

{
  "products": [
    {
      "productId": 1,
      "name": "Product 1",
      "description": "Category 1"
    }
  ]
}

您可以将来自 Web API 服务器的响应更新为 Ember 期望的格式，但在 Ember 中创建序列化程序以将来自 Asp Web API 的数据映射到 Ember 的格式会更容易。

我wrote a detailed blog post这解释了如何创建一个 Ember 序列化程序来执行此映射。

请务必阅读博文以了解序列化程序中发生的事情。但作为引用，我认为您的序列化程序应该如下所示:

App.ProductSerializer = DS.RESTSerializer.extend({
  primaryKey: 'productId',

  extract: function(store, primaryType, payload, id, requestType) {
    if (payload.length) {
      for (var i = 0; i < payload.length; i++) {
        this.mapRecord(payload[i]); 
      }
    } else {
      this.mapRecord(payload);
    }

    payloadWithRoot = {};
    payloadWithRoot[primaryType.typeKey] = payload;

    this._super(store, primaryType, payloadWithRoot, id, requestType)
  },

  mapRecord: function(record) {
    for (var property in record) {
      var value = record[property];
      record[property.camelize()] = value;
      delete record[property];
      return record;
    }
  },

  serializeIntoHash: function(hash, type, record, options) {
    var recordJSON = record.toJSON();
    for (var property in recordJSON) {
      var value = recordJSON[property];
      hash[property.capitalize()] = value
    }
  }
});