如何显示从API返回的对象对象数据表示

Question

以下是我API

的回复

"attributes": {
"original-data": "{\"name\":\"Foobarz\",\"updated_at\":\"2018-02-27 
08:06:14 UTC\"}",
"new-data": "{\"name\":\"Foobar\",\"updated_at\":\"2018-02-27 
10:55:17 UTC\"}",
"event-name": "update",
"ip-address": "121.58.201.106",
"user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 
Safari/537.36",
"created-at": "2018-02-27T10:55:17.477Z",
"updated-at": "2018-02-27T10:55:17.477Z"
},

以下是我的route.js

上的模型钩子

model() {
  return this.store.findRecord('audit-trail', 41, {include: 'audit-trailable'});
}

当我{{model.eventName}}时，它显示事件名称信息update。但是，当我执行{{model.newData}}时，它会重新启动[object Object]。我的问题是，如何显示new-data属性字段值name和updated_at？

Answer 1

那边是Hy。如果你负担得起，最好的是使用https://github.com/lytics/ember-data-model-fragments

所以：models / audit-trial.js

import DS from 'ember-data';
import MF from 'ember-data-model-fragments';

export default DS.Model.extend({
    whatever_simple_attr: DS.attr(),
    new_data: Mf.fragment('new-data'),
});

with：models / new-data.js

import MF from 'ember-data-model-fragments';
import DS from 'ember-data';

export default MF.Fragment.extend({
    name: attr(),
    updated_at: attr('date')
});

编辑：添加序列化程序，再次：未经过实际测试，但想法就在这里 - ＆gt;

serializers / new-data.js（使用underscore.js lib）

  

重要：我在我的模型中使用了snake_case属性，如果你使用lowerCamelCase，也许你的代码会有所不同。

import JSONSerializer from 'ember-data/serializers/json';
/* global _ */

export default JSONSerializer.extend({
  normalize(typeClass, hash) {
    _.forEach(hash, (value, key) => {
      hash[key.underscore()] = value;
      // prevent kinda twins (my_key and my-key)
      if (key.underscore() !== key) {
        delete hash[key];
      }
    });
    return this._super.apply(this, arguments);
  }
});

串行/审计trial.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({

  normalize(_, data) {
    data.attributes["new-data"] = JSON.parse(data.attributes["new-data"])
    // maybe this too, with associated model and serializer
    data.attributes["original-data"] = JSON.parse(data.attributes["original-data"])
    return this._super(...arguments);
  },

});

Answer 2

Ember-data-model-fragments是好的。或者您可以使用以下模型：

DS.Model.extend({
  originalData: DS.attr("string"),
  newData: DS.attr("string"),
  ...

然后在您的组件（或控制器）中使用：

originalData = JSON.stringify(model.get("originalData"))

在你的模板中：

{{originalData}}

Answer 3

如果您在模板中执行了{{model.newData.name}}，那么事情是否有效？ Ember Data对任何对象的默认方法是在从后端发送它时使其可用。这意味着它会强调密钥（即model.newData.updated_at）但应该有效。