Ember 数据如何覆盖存储模型数据的实例
How does Ember Data write over instances of stored model data
好的,我是 Ember 的新手,所以请多多包涵。
我有一个 Ember 应用程序正在与不遵守 JSONAPI 标准的 API 进行通信,因此我已经开始编写自己的序列化程序为了使用 Ember 数据。但是,我发现当我对同一资源发出多个请求时,数据无法写入商店。对同一资源的连续请求始终响应以下错误:
TypeError: 无法将 object 转换为原始值
根据我有限的理解,这意味着我发送到商店的数据被视为字符串。
在我的应用程序路径中,我为我的模型 'listing-item' 写了一个 findAll
,如下所示:
model: function() {
return this.store.findAll('listing-item');
},
在嵌套的 'user' 路由中,当我对 listing-item 数据执行任何类型的请求时,returns 对 [=54= 的数组响应(查询,查找全部) ] 数据,我得到:
TypeError: Cannot convert object to primitive value
at EmptyObject.SETTER_FUNCTION [as title] (ember.debug.js:20672)
at assign (<anonymous>)
at InternalModel.setupData (internal-model.js:244)
at Class._load (store.js:1728)
at Class._pushInternalModel (store.js:2055)
at Class._push (store.js:1995)
at finders.js:141
at Backburner.run (ember.debug.js:720)
at Class._adapterRun (store.js:2253)
at finders.js:139
(标题是我的列表项模型中的一个字段)。
正如我之前提到的,我的 API 不符合 JSONAPI 标准,所以我写了一个 listing-item 序列化程序,如下所示:
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
normalizeArrayResponse(store, primaryModelClass, payload) {
payload.data = [];
payload.listing_item._data.forEach(this.formatListingItemArray, payload.data);
delete payload.listing_item;
return payload;
},
formatListingItemArray(listingItem) {
this.push({
type: "listing-item",
id: listingItem.id,
attributes: {
title: listingItem.title,
description: listingItem.description,
buy_now_price: listingItem.buy_now_price,
created_at: listingItem.created_at,
category_id: listingItem.category_id,
subcategory_id: listingItem.subcategory_id,
identity_id: listingItem.identity_id,
listing_number: listingItem.listing_number,
brand_new: listingItem.brand_new,
sold: listingItem.sold,
},
});
},
});
所以我想我的问题是,Ember 数据对我的数据 object 做了什么导致发生此错误,以及我在为 [=62] 格式化数据时可能做错了什么=] 要消耗的数据。
UPDATES:
似乎只有前 3 个字段导致此错误发生。如果我在序列化程序中注释掉 'title'、'description' 和 'buy_now_price' 属性,则不会出现此错误。此外,这似乎只在我导航到路由时发生,如果应用程序加载时我在 /user 路由中,则两个请求都按预期工作。
好的,所以我一直在搜索 ember-data 代码,发现在 internal-model.js 文件中有一个设置函数可以查看商店中的当前属性并进行比较到从序列化程序传递的数据。然后它执行 assign() 将序列化程序的新数据复制到存储 object。但是由于某种原因,我的商店 object 似乎有一组 'getter' 和 'setter' 函数,这些函数从商店返回有问题的字段(标题、描述和 buy_now_price ).我现在需要知道的是,为什么这些功能会随之而来,我做了什么导致这种情况?
Picture of getters/setters on ember-data object
提前致谢,如果我需要提供更多信息以提供更好的上下文,请告诉我。
所以我为遇到类似问题的任何人找到了解决我的问题的方法。
症状如上所述,似乎 ember-data 正在从商店返回 getter 和 setter 功能,并且在将我的新值放入它们时遇到问题代替。然而,线索是我在模板中呈现的只是字段。
问题似乎是我使用 Ember 并发任务来执行数据加载,然后将任务直接传递到模型模板中的内部组件。像这样(未经测试的代码):
错误的模式(我曾经用过的模式遇到过这个问题)。
//route file - application.js
export default Ember.Route.extend({
model: function() {
return {
listings: this.get('getListings').perform(),
};
},
getListings: task(function * () {
return yield this.store.findAll('listing-item');
}),
})
//application template - application.hbs
{{listing-index listings=model.listings}}
//listing index component template.hbs
{{#if listings.value}}
{{#each listings.value.content as |listing|}}
{{listing._data.title}}
{{listing._data.description}}
{{listing._data.buy_now_price}}
{{/each}}
{{/if}}
正确的模式似乎是这样的:
//route file - application.js
export default Ember.Route.extend({
model: function() {
return {
listings: this.get('getListings').perform(),
};
},
getListings: task(function * () {
return yield this.store.findAll('listing-item');
}),
})
//application template - application.hbs
{{#if listings.value}}
{{listing-index listings=model.listings.value}}
{{/if}}
//listing index component template.hbs
{{#each listings as |listing|}}
{{listing.title}}
{{listing.description}}
{{listing.buy_now_price}}
{{/each}}
所以问题似乎出在这种将任务而不是任务内容传递到我的组件的模式中。当我遍历模型模板中的列表然后将列表直接传递给组件时,它似乎已经解决了我的问题。我认为这与使用这些 _data 属性有关。进一步的解释将不胜感激,但我暂时将其标记为已解决。
好的,我是 Ember 的新手,所以请多多包涵。
我有一个 Ember 应用程序正在与不遵守 JSONAPI 标准的 API 进行通信,因此我已经开始编写自己的序列化程序为了使用 Ember 数据。但是,我发现当我对同一资源发出多个请求时,数据无法写入商店。对同一资源的连续请求始终响应以下错误:
TypeError: 无法将 object 转换为原始值
根据我有限的理解,这意味着我发送到商店的数据被视为字符串。
在我的应用程序路径中,我为我的模型 'listing-item' 写了一个 findAll
,如下所示:
model: function() {
return this.store.findAll('listing-item');
},
在嵌套的 'user' 路由中,当我对 listing-item 数据执行任何类型的请求时,returns 对 [=54= 的数组响应(查询,查找全部) ] 数据,我得到:
TypeError: Cannot convert object to primitive value
at EmptyObject.SETTER_FUNCTION [as title] (ember.debug.js:20672)
at assign (<anonymous>)
at InternalModel.setupData (internal-model.js:244)
at Class._load (store.js:1728)
at Class._pushInternalModel (store.js:2055)
at Class._push (store.js:1995)
at finders.js:141
at Backburner.run (ember.debug.js:720)
at Class._adapterRun (store.js:2253)
at finders.js:139
(标题是我的列表项模型中的一个字段)。
正如我之前提到的,我的 API 不符合 JSONAPI 标准,所以我写了一个 listing-item 序列化程序,如下所示:
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
normalizeArrayResponse(store, primaryModelClass, payload) {
payload.data = [];
payload.listing_item._data.forEach(this.formatListingItemArray, payload.data);
delete payload.listing_item;
return payload;
},
formatListingItemArray(listingItem) {
this.push({
type: "listing-item",
id: listingItem.id,
attributes: {
title: listingItem.title,
description: listingItem.description,
buy_now_price: listingItem.buy_now_price,
created_at: listingItem.created_at,
category_id: listingItem.category_id,
subcategory_id: listingItem.subcategory_id,
identity_id: listingItem.identity_id,
listing_number: listingItem.listing_number,
brand_new: listingItem.brand_new,
sold: listingItem.sold,
},
});
},
});
所以我想我的问题是,Ember 数据对我的数据 object 做了什么导致发生此错误,以及我在为 [=62] 格式化数据时可能做错了什么=] 要消耗的数据。
UPDATES:
似乎只有前 3 个字段导致此错误发生。如果我在序列化程序中注释掉 'title'、'description' 和 'buy_now_price' 属性,则不会出现此错误。此外,这似乎只在我导航到路由时发生,如果应用程序加载时我在 /user 路由中,则两个请求都按预期工作。
好的,所以我一直在搜索 ember-data 代码,发现在 internal-model.js 文件中有一个设置函数可以查看商店中的当前属性并进行比较到从序列化程序传递的数据。然后它执行 assign() 将序列化程序的新数据复制到存储 object。但是由于某种原因,我的商店 object 似乎有一组 'getter' 和 'setter' 函数,这些函数从商店返回有问题的字段(标题、描述和 buy_now_price ).我现在需要知道的是,为什么这些功能会随之而来,我做了什么导致这种情况?
Picture of getters/setters on ember-data object
提前致谢,如果我需要提供更多信息以提供更好的上下文,请告诉我。
所以我为遇到类似问题的任何人找到了解决我的问题的方法。
症状如上所述,似乎 ember-data 正在从商店返回 getter 和 setter 功能,并且在将我的新值放入它们时遇到问题代替。然而,线索是我在模板中呈现的只是字段。
问题似乎是我使用 Ember 并发任务来执行数据加载,然后将任务直接传递到模型模板中的内部组件。像这样(未经测试的代码):
错误的模式(我曾经用过的模式遇到过这个问题)。
//route file - application.js
export default Ember.Route.extend({
model: function() {
return {
listings: this.get('getListings').perform(),
};
},
getListings: task(function * () {
return yield this.store.findAll('listing-item');
}),
})
//application template - application.hbs
{{listing-index listings=model.listings}}
//listing index component template.hbs
{{#if listings.value}}
{{#each listings.value.content as |listing|}}
{{listing._data.title}}
{{listing._data.description}}
{{listing._data.buy_now_price}}
{{/each}}
{{/if}}
正确的模式似乎是这样的:
//route file - application.js
export default Ember.Route.extend({
model: function() {
return {
listings: this.get('getListings').perform(),
};
},
getListings: task(function * () {
return yield this.store.findAll('listing-item');
}),
})
//application template - application.hbs
{{#if listings.value}}
{{listing-index listings=model.listings.value}}
{{/if}}
//listing index component template.hbs
{{#each listings as |listing|}}
{{listing.title}}
{{listing.description}}
{{listing.buy_now_price}}
{{/each}}
所以问题似乎出在这种将任务而不是任务内容传递到我的组件的模式中。当我遍历模型模板中的列表然后将列表直接传递给组件时,它似乎已经解决了我的问题。我认为这与使用这些 _data 属性有关。进一步的解释将不胜感激,但我暂时将其标记为已解决。