显示产品的 belongsTo 类别

Question

我在http://localhost:4200/products 渲染了一个product 表，其中应该包括每个产品的category，但没有。

模板代码：

app/templates/products/index.hbs

[...]
<tbody>
  {{#each product in model}}
    <tr>
      <td>
        {{product.name}}
      </td>
      <td>
        {{product.category.name}}
      </td>
[...]

为什么{{product.category.name}} 不显示product.name？我该如何解决？模拟错了吗？

应用程序

ember new shop
cd shop
ember install:addon ember-cli-scaffold
ember g scaffold product name:string
ember g scaffold category name:string
ember g adapter application
ember g http-mock products
ember g http-mock categories

app/adapters/application.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  'namespace': 'api'
});

app/models/product.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  category: DS.belongsTo('category', { async: true })
});

app/models/category.js

import DS from 'ember-data';

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

server/mocks/products.js

module.exports = function(app) {
  var express = require('express');
  var productsRouter = express.Router();

  productsRouter.get('/', function(req, res) {
    res.send({
      'products': [
          {"id":1,"name":"Orange","category":1},
          {"id":2,"name":"Banana","category":1},
          {"id":3,"name":"Potato","category":2}
        ]
      });
  });
  [...]

server/mocks/categories.js

module.exports = function(app) {
  var express = require('express');
  var categoriesRouter = express.Router();

  categoriesRouter.get('/', function(req, res) {
    res.send({
      'categories': [
        {"id":1,"name":"Fruits","products:":[1,2]},
        {"id":2,"name":"Vegetables","products:":[3]}
        ]
      });
  });
  [...]

Answer 1

您应该将您的 belongsTo 定义为异步：

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  category: DS.belongsTo('category', { async: true })
});

这将为您访问的每个类别执行 GET 请求。

或者您可以将产品侧载到它们。

看看这个jsbin，它表明它可以工作。

如果您查看模拟服务器，您会看到这条路线：

categoriesRouter.get('/:id', function(req, res) {
  res.send({
    'categories': {
      id: req.params.id
    }
  });
});

正如您所见，当您请求 category 1 时，它会返回一个只有该 ID 的对象。

所以添加{ async: true } 会根据category 向/category/1 提出请求（当然，当它是第1 类时）。您必须确保返回正确的对象。

例如：

var categoryList = [
  {"id":1,"name":"Fruits","products:":[1,2]},
  {"id":2,"name":"Vegetables","products:":[3]}
]

categoriesRouter.get('/:id', function(req, res) {
  res.send({
    'categories': categoryList.filter(function(c) { 
      return c.id == req.params.id; 
    })[0]
  });
});