Ember - 通过商店或新的 ajax 调用手动 link 到另一个模型

Question

Ember 新来的...

// working with
Ember      : 1.13.6
Ember Data : 1.13.7

__

/api/locations

{
  "locations":[
   {
      "id":"1",
      "uri":"/location/1",
      "name":"ATLANTA"
   },
   {
      "id":"2",
      "uri":"/location/2",
      "name":"NORTH VIRGINIA"
   }
 ]
}

__

/api/hosts/1/show

{
  "id": 1,
  "active": true,
  "location_uri": "/location/1"
}

单个主机包含对某个位置的引用，但我在查看主机信息时只有 "location_uri" 没有位置 ID，我希望可以使用它来手动查看将此记录添加到显示主机显示页面时的模型中。

.......我想显示位置的名称而不是这个 uri，我想 link 它回到主机显示页面的实际位置。我需要一些关于如何执行此操作的想法？

我想明白如何像这样在我的商店中查找记录：

this.store.find('location', {uri: this.model('location')})

但是我遇到麻烦的地方和时间。或者，即使我只是手动调用 api 来获取位置数据并以某种方式将其包含在我的主持人表演模型中，这也是一个有用的技巧。

我很确定我不能为此使用关系，因为它在 JSON 中并不存在，对吗？

Answer 1

实际上你可以用关系来做到这一点，但你必须覆盖你的适配器 and/or 序列化程序。

如果您扩展 JSONAPISerializer，您可能会将您的主机响应序列化为如下内容：

{
  id: "1",
  type: "host",
  attributes: {
    active: true
  },
  relationships: {
    location: {
      links: {
        related: "/location/1"
      }
    }
  }
}

假设这是您的 /models/host.js：导出 DS.Model.extend({ 活动：DS.attr('boolean'), 位置：DS.belongsTo('location') });

这是你的models/location.js：导出 DS.Model.extend({ 姓名：DS.attr('string') })

然后你可以这样做

this.store.find('host', '1').then(host => console.log(Ember.get(host, 'location.name')))

我建议永远不要在您的 .find() 调用中覆盖 uri，而是在您的适配器上设置它，并构建一个不错的序列化程序。

Answer 2

所以我无法让 JSON API 关系正常工作或制造，但确实想出了我认为是我试图实现的简单解决方案。

serializers/applicaiton.js

import DS from 'ember-data';
import Ember from 'ember';

export default DS.JSONSerializer.extend({

 /** 
  * temporarily create location property
  * parse the id out of the location_uri "/location/1", need just "1"
  */
 normalize: function (type, hash, property) {
    if (!!hash.location_uri) {
      json['location'] = parseFloat(hash.location_uri.match(/\d+/g));
    }
 },

 /** 
  * when submitting C_UD request remove the manufactured location
  */
 serialize: function (snapshot) {
    delete json['location'];
 }

});

在我的 host model 中，我将商店 belongsTo 助手分配给制造位置。

models/host.js

import DS from 'ember-data';

var attr = DS.attr;

export default DS.Model.extend({
  uri: attr(),
  active: attr('boolean'),
  location_uri: attr(),
  location: DS.belongsTo('location', {async: true})
});

在我的模板中，我现在可以这样做：

{{#link-to 'location.show' host.location.id }}{{host.location.name}}{{/link-to}}

Ember - 通过商店或新的 ajax 调用手动 link 到另一个模型

Ember - manually link to another model via store or new ajax call

javascript

ember.js

ember-data

ember-cli