ember-data：很难将数据放入存储中

Question

我有一个在服务器端构建的现有搜索应用程序，它使用由 python/flask 处理的弹性搜索。在客户端，它使用 JS/jQuery 和把手来解析和呈现数据。

我想更进一步并在 ember 中构建它，因为“控件”（过滤器、排序、分页等）使其成为 SPA 的完美候选者。

我了解 ember 基础知识，但我觉得我遇到了 ember-data 的难题 - 即如何将我的数据放入存储中以便我可以绑定操作。有人可以指出我正确的方向吗？

我现有的 JSON API 是这样访问的：

http://localhost:8000/search?q=shirt&paging=18&filter-price=100

它会像这样返回 JSON：

{
  "aggregations": {
    "breadcrumb": [], 
    "color": [], 
    "price": [], 
    "size_apparel": [],
    "size_jewelry": []
  }, 
  "meta": {
    "agg_list": [], 
    "default_sort": "", 
    "key_translations": {}, 
    "paging": 18, 
    "paging_options": [], 
    "sort_methods": [],
    "from": 0, 
    "hits": 89, 
    "pages": 5, 
    "q": "shirt"    
  }, 
  "results": [
    {
      "creation_date": "", 
      "image": "", 
      "images": {
        "altimg1": "", 
        "large": "", 
        "regular": "/", 
        "small": ""
      }, 
      "name": "This Product", 
      "price": "19.95", 
      "skuid": "ABC123", 
      "url": "shirt.html"
    }, 
    {...}, 
    {...}
  ] 
}

这是可用的还是我需要重写后端？我已经修改了访问数据并且有一些非常粗糙的工作。我实际上可以看到“结果”数据，但我不知道如何访问“元”和“聚合”数据。我认为这是“sam 有效载荷中的多个模型”并且 RSVP.hash 应该可以工作......但 ember-data 似乎要求每个模型都有一个 id。这对于“结果”模型是有意义的，但对于聚合和元数据绝对不是。

现在我只想让它显示出来。

首先，我的适配器是：

export default DS.RESTAdapter.extend({
    host: 'http://localhost:8000',
    pathForType() {
        return 'search';
    }
});

测试控制器是：

export default Ember.Controller.extend({
  queryParams: ['q','paging'],
  q: 'shirt',
  paging: '18'
});

我的“结果”模型是：

const { attr } = DS;

export default Model.extend({
    'creation_date': attr('string'), 
    'has_pricerange': attr('string'), 
    'image': attr('string'), 
    'name': attr('string'), 
    'price': attr('string'), 
    'skuid': attr('string'), 
    'url': attr('string')
});

路线：

export default Ember.Route.extend({
  model(params) {
    return this.store.query('result', { 
        q: params.q,
        paging: params.paging
    });   
  }
});

序列化器：

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

使用 jquery 很容易做到这一点 - 您只需 $.get 然后使用对象表示法访问数据。我知道 ember 不是 jquery，但它似乎应该更容易访问数据。我错过了什么吗？采取错误的方法？我应该从头开始吗？

Answer 1

Ember Data 是 Ember 拼图中的一大块，但绝不是必需的。您是否应该使用 Ember Data 真的取决于您的数据性质、API 的控制以及您期望的面向未来的能力

您的数据的性质

Ember Data 非常擅长处理典型的模型/实体类型数据。具有属性并且可以相互关联的“事物”。如果您的数据遵循该模式，那么 Ember Data 可能非常适合。

控制您的 API

正如另一个答案中提到的，如果您可以购买 JSON API 格式，您将免费获得很多。这已成为 Ember Data 的标准，但并非 Ember 独有。许多服务器端选项都可以使用many existing frameworks 轻松序列化这些资源。如果您无法更改来自服务器的数据，或者如果只在前端处理它更容易，您可以在 Ember 中自定义适配器/序列化器。

期望的面向未来的能力

Ember Data 允许您在保持模型完好无损的同时更换适配器/序列化器。如果您希望您的应用程序在未来处理不同的源，这是可取的，可能从使用您自己的 API 转换为使用本地存储，或者像 firebase 这样的 3rd-party 服务。如果不打算进行太多更改，您可以进行基本的 ajax 调用并在您的 model 钩子中返回一个承诺，Ember 将或多或少地工作。我建议使用ember-network，它是针对fetch API 指定的，并且作为FastBoot 兼容请求可能会得到越来越多的支持。

需要考虑的其他事项是 Ember 数据和使用 Ember 对象可能会很繁重，具体取决于您将传入的每个模型的实例数量。

其他人也在解决这个问题。 Toran Billups 使用 ember-redux 提取了 redux 模式，这是另一种思考如何处理数据的好方法。

您的用例

所以你可以：

将 Ember 数据与 find 一起使用

看看您的数据形状，您似乎提供了更多的搜索服务，而不是查询特定模型/实体。 Ember Data 确实有一个 find 方法，但您提供的元数据量可能会超出模型用例。

忘记 Ember 数据并使用搜索端点

model: function(params)，使用模型钩子中的参数构造到搜索端点的url，并返回一个promise（根据需要添加then以塑造数据）

查询搜索端点（API重构）

与上述类似的想法，但您将使用获取产品 ID 并使用它们来查询产品的 ember 数据存储。

类似于：

fetch("service-end-point?with=queryparams")
  .then(result => {
    return {
      products: this.store.findMany(Product, result.ids);
    };
  });

我认为直接在控制器中处理和调整数据并跳过 Ember 数据是最容易上手的。如果您想要特定的计算属性绑定，那么您没有理由使用您想要的形状扩展 Ember.Object，然后使用 .map 之类的东西从网络请求中获取结果并像 payload => Object.create(payload) 一样应用它。

如果您对这些想法有任何疑问，请告诉我。

Answer 2

我建议您阅读指南的this section，特别是关于$.getJSON 的部分。 Ember 旨在使用强大的商店。如果您使用的是标准 api（例如 JSON API），它会更容易使用；您可以直接使用 Ember 数据代码。但如果没有，您将不得不编写一些序列化程序代码，以便 Ember 知道如何使用您的 api。但是，一旦完成，您的组件代码将不会与您的数据获取代码耦合。

不过，如果您仍在进行原型设计，则可以使用 $.getJSON。