灰烬 - 通过商店或新的ajax调用手动链接到另一个模型

时间:2016-04-05 23:10:09

标签: javascript ember.js ember-data ember-cli

Ember newb在这里......

// 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"
}

单个主机包含一个返回位置的引用,但在查看主机信息时我没有位置ID只是“location_uri”,这是我希望我可以用来手动查找此记录和在显示主持人节目页面时包含在模型中。

enter image description here          .......我想显示位置的名称而不是这个uri,我想将它链接回主机显示页面的实际位置。我需要一些如何做到这一点的想法?

我想了解如何在我的商店中查找记录如下:

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

但在何时何地使用是我遇到麻烦的地方。或者即使我只是手动进行api调用以获取位置数据,并以某种方式将其包含在我的主机节目模型中将是一个有用的技巧。

我很确定我不能使用这种关系,因为它在JSON中确实不存在吗?

2 个答案:

答案 0 :(得分:1)

实际上,您可以通过关系执行此操作,但必须覆盖适配器和/或序列化程序。

如果您扩展JSONAPISerializer,您可能会将主机响应序列化为以下内容:

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

假设这是你的/models/host.js:     export DS.Model.extend({       active:DS.attr('boolean'),       位置:DS.belongsTo('location')     });

这是你的models/location.js:     export DS.Model.extend({       名称:DS.attr('string')     })

然后你可以做类似

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

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

答案 1 :(得分:1)

所以我无法使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}}