Ember.js 和 Ember 数据 : How to create record with hasMany relationship when the parent and child don't exist yet

Question

就像我对 ember-data 所做的大多数事情一样，简单的测试用例非常简单，但由于我缺乏理解(我认为文档)，任何“真实”的东西都会很快崩溃。在最简单的情况下，我可以毫无问题地创建新记录并将其保存到我的 REST API。我将使用流行的水果篮示例，并从保存一 block 新的水果开始。

// Here is our fruit model
module.exports = App.Fruit= DS.Model.extend({
    name: attr('string'),   
    color: attr('string')
});

// This is easy to create and save
var fruit = this.store.createRecord('fruit', {
    name: 'apple',
    color: 'red'
});

fruit.save().then(successCallback, errorCallback);

好的，我这里没问题。从概念上讲是有道理的，代码很干净，而且事情看起来很美好!现在假设我们有一个basket 模型，并且该basket 模型可以容纳大量水果。此外，用户可以从 UI 一步创建新的fruit并将其添加到尚未创建的新basket中。

以下是新模型:

module.exports = App.Fruit= DS.Model.extend({
    name: attr('string'),   
    color: attr('string')
    basket: DS.belongsTo('basket')
});

module.exports = App.Basket = DS.Model.extend({
    fruits: DS.hasMany('fruit', {async:true})
});

鉴于上述情况，假设用户输入了商店中或后端 REST API 中当前不存在的两种新水果，将它们添加到他的新购物篮中(尚不存在)，然后点击“保存”。

如何使用 Ember Data 创建此记录？我希望你能做这样的事情:

var newFruits = Ember.A();

newFruits.pushObject(this.store.createRecord('fruit', {
    name: 'orange',
    color: 'orange'
}));

newFruits.pushObject(this.store.createRecord('fruit', {
    name: 'banana',
    color: 'yellow'
}));

var basket = this.store.createRecord('basket', {
    fruits: newFruits
});

basket.save().then(successCallback, errorCallback);

不幸的是，这似乎不起作用。当我在 Chrome 检查器中查看 POST 请求数据时，购物篮的 fruits 属性始终为空。基本上，请求最终看起来是这样的:

{
    basket: {
       fruits: []
    }
}

我是否使用了正确的模式来创建“篮子”记录？我希望我不必在保存篮子之前先保存每 block 水果，因为发送 3 个 POST 请求似乎很浪费，而 1 个就足够了。此外，当用户想要制作 10 颗水果时会发生什么？那将是 11 个 POST 请求。

是否有完成上述任务的标准做法？本质上，如何创建具有 hasMany 关系(篮子)的新记录，其中 hasMany 关系中的记录也是新的(水果)。

谢谢!

以下是我正在使用的版本:

------------------------------- 
Ember      : 1.3.2+pre.25108e91 
Ember Data : 1.0.0-beta.7+canary.238bb5ce 
Handlebars : 1.3.0 
jQuery     : 2.0.3 
------------------------------- 

Answer 1

我只是自己解决这个问题，但我只是这样做了并且它有效......

对于初学者来说，当您 this.store.createRecord('basket', {}) 时，它的 fruits 属性应该带有一个空数组。所以，这样做:

var basket = this.store.createRecord('basket', {});

basket.get('fruits').addObject(this.store.createRecord('fruit', {
    name: 'orange',
    color: 'orange'
}));

basket.get('fruits').addObject(this.store.createRecord('fruit', {
    name: 'banana',
    color: 'yellow'
}));

顺便说一句，空的fruits数组实际上是一个DS.PromiseArray(它可能会立即解析为DS.ManyArray？)，一个Ember.Array 的更具体的子类，因此可能会产生影响。

但是，我发现 fruits 属性根本不会被序列化 - 不过我正在使用 JsonApiAdapter，因此可能就是原因。或者，当 hasMany 子对象尚未持久化时，这可能是预期的行为。不管怎样，我只是在 Controller 的 actions.save 方法中做了类似的事情:

basket.save().then(function(){
    var promises = Ember.A();
    basket.get('fruits').forEach(function(item){
        promises.push(item.save());
    });
    Ember.RSVP.Promise.all(promises).then(function(resolvedPromises){
        alert('All saved!');
    });
});

不知何故，神奇的是，当所有这些完成后，我最终得到了一个保存的“篮子”，带有生成的id，并保存了带有生成的id的“水果” s。而且，所有水果的 belongsTo 属性都指向篮子，并且篮子的 hasMany 包含所有水果……尽管事实上，当我 save() d 篮子后，我后端的响应为我的 fruits 属性返回了一个空数组，我确信这会弄乱事情，但不知何故没有。

当然，这些不是我的实际模型，但相似度非常接近。我使用的是 Ember Data 1.0.0-beta5 和 Ember 1.3.1。我没有使用普通的 REST 适配器，但 JsonApiAdapter 是一个非常薄的外壳——所以尝试这种方法，看看它是否有效!

编辑

我打开了similar question here这解决了我使用上述代码更新现有记录(而不是创建新记录)时遇到的问题。该解决方案更通用、更详细，但也更复杂。

此外，我遇到的另一个潜在问题是，当(在本示例中)创建 basket 时，fruits 属性(这是一个 DS. PromiseArray)可能尚未完全准备好。所以你可能需要这样做:

var basket = this.store.createRecord('basket', {});

basket.get('fruits').then(function(){
    // Now the fruits array is available
    basket.get('fruits').addObject(this.store.createRecord('fruit', { /* ... */ }));
});