ember-data：为用户维护的产品列表建模 [英] ember-data: modeling a user-maintained list of products

问题描述

试图全神贯注于如何为已登录用户有效地建模和编码已保存项目列表。

我希望用户能够从产品页面上单击保存项目，它将把该项目添加到用户配置文件中保存的列表中，该列表包含自己的路线，显示他们的物品并允许他们管理列表。在该路线上，只要列表有更改（例如，项目已删除），它都应刷新以反映更改。

我想认为用户模型如下所示：

 从'ember-data'导入DS； 
 const {attr，belongsTo，hasMany} = DS; 
 
导出默认DS.Model.extend（{
 savedItems：hasMany（’product’），
 ... 
}）; 
  

然后我可以通过以下操作向其中添加项目：

 操作：{
 addSavedItem（product）{
 this.get（'store'）。findRecord（'user'，'me'） .then（user => {
 user.get（'savedItems'）。pushObject（product）; 
 user.save（）; 
}）; 
}，
} 
  

并将这些保存的项目加载到我的保存项目中像这样的路线：

  model（）{
 return this.get（ store）。findRecord（'user' ，'me'）。then（user => {
 return user.get（'savedItems'）; 
}）; 
} 
  

那行得通！但是... 产品会传入整个产品对象。名称，价格，描述等。然后保存将全部内容发送到后端。然后后端必须将其全部发送回（我认为），这样才能正常工作。

有没有办法让 savedItems 存储 just 产品ID，是否有余烬数据按需加载其余产品数据？产品ID是我需要坚持到后端的全部。

我尝试删除关系并拥有 savedItems 是一个数组：

  savedItems：attr（''）
  

仅存储产品ID。我在那里取得了部分成功。但是我不知道如何在 saved-items 路线中设置 model 钩子，以便刷新

感谢任何帮助！

更新：仅从后端传递产品ID即可-但前提是该产品已经在商店中。

解决方案

I我自己已通过以下方式设置了此类关系：

  //模型user.js 
导出默认DS.Model.extend（ {
 savedItems：hasMany（'savedItem'），
 ... 
}）; 
 
 //模型saveItem.js 
导出默认DS.Model.extend（{
 // id-我在模型中有我的ID，例如字符串'userID_productID'
 // //只是为了方便后端操作。
用户：属属（'user'），
产品：属属（'product'），
 someOtherPropertyUniqueToThatRelation：attr（'string'） ，//就像状态
 ... 
}）； 
  

然后，我只需将另一个记录添加到关系船模型中。

  addSavedItem（product）{
 this.get（'store'）。findRecord（'user'，'me '）.then（user => {
 let safedItem = this.get（'store'）。createRecord（'safedItem'，{
 user：user，
 product：product，
 otherProp：'whatever'
}）; 
 safedItem.save（）; 
}）; 
}，
  

现在，它仅将用户和产品的ID发送到后端。 / p>

也许我做错了，或者这是一种奇怪的方法，但这在所有情况下都对我有效。

Trying to wrap my head around how to efficiently model and code a "saved items" list for logged-in users.

I want the user to be able to click "save item" from a product page, and it will add the item to a list kept in their user profile that has its own route that displays their items and allows them to manage the list. On that route, anytime there are changes to the list (like, item is removed), it should refresh to reflect the changes.

I'd think the user model would look something like this:

import DS from 'ember-data';
const { attr, belongsTo, hasMany } = DS;

export default DS.Model.extend({
    savedItems: hasMany('product'),
    ...
});

And then I can add items to it with this action:

actions: {
    addSavedItem(product) {
        this.get('store').findRecord('user', 'me').then(user => {
            user.get('savedItems').pushObject(product);
            user.save();
        });
    },
}

And load those saved items in my saved-items route like:

model() {
    return this.get("store").findRecord('user', 'me').then(user => {
        return user.get('savedItems');
    });
}

That works! BUT...product passes in the entire product object. Name, prices, description, etc. Then save sends it all in the payload to the back end. Then the back-end has to send it all back (I think) for this to stay working.

Is there a way to have savedItems store just product IDs, and have ember-data load the rest of the product data as-needed? Product ID is all I need to persist to the back end.

I've tried removing the relationship and having savedItems be an array:

savedItems: attr('')

that stores just product IDs. And I had partial success there. But I can't figure out how to set up the model hook in the saved-items route so the it refreshes whenever there are changes to that list.

Any help appreciated!

UPDATE: Passing back just the product ids from the back end works - but only if the product is already in the store.

解决方案

I myself have setup such relationships that way:

// model user.js
export default DS.Model.extend({
    savedItems: hasMany('savedItem'),
    ...
});

// model savedItem.js
export default DS.Model.extend({
    //id- I have my ids in such a model as a string 'userID_productID'
    // just for convinience in the backend.
    user: belongsTo('user'),
    product: belongsTo('product'),
    someOtherPropertyUniqueToThatRelation: attr('string'), // like a status
    ...
});

then I simply add another record to the relationShip Model.

addSavedItem(product) {
    this.get('store').findRecord('user', 'me').then(user => {
        let safedItem = this.get('store').createRecord('safedItem', {
              user: user,
              product: product,
              otherProp: 'whatever'
        });
        safedItem.save();
    });
},

Now it's only sending the ids of user and product to the backend.

Maybe I'm doing it wrong, or this a strange approach, but that works fine for me in all situations.

这篇关于ember-data：为用户维护的产品列表建模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！