如何使用ember.js向记录添加新关联？

Question

我有两个相互关联的模型：

• 模特记录＆＃34;国家＆＃34; hasMany＆＃34;城市＆＃34;;
• 模型记录＆＃34;城市＆＃34; belongsTo a＆＃34;国家＆＃34;。

我无法弄清楚如何在action的路线中进行这些关联。 这是我的application模板：

<script type="text/x-handlebars">
<p><button {{action 'save'}}>add data</button></p>
<ul>
{{#each country in model}}
<li>{{country.name}}
  <ul>
  {{#each city in country.cities}}
    <li>{{city.name}}</li>
  {{/each}}
  </ul>
</li>
{{/each}}
<ul>
</script>

我的模特是：

App.Countries = DS.Model.extend({
  name: DS.attr('string'),
  cities: DS.hasMany('cities', {async: true})
});

App.Cities = DS.Model.extend({
  name: DS.attr('string'),
  country: DS.belongsTo('countries', {async: true})
});

这里是申请路线：

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('countries');
    },
    actions: {
        save: function() {
            var store = this.store;

            var country = store.createRecord('countries', {
                'name': 'France'
            });
            var city1 = store.createRecord('cities', {
                'name': 'Paris'
            });
            var city2 = store.createRecord('cities', {
                'name': 'Marseille'
            });

            country.get('cities').then(function(cities) {
                return cities.pushObject(city1);
            });
            country.get('cities').then(function(cities) {
                return cities.pushObject(city2);
            });

            city1.set('country', country);
            city2.set('country', country);

            country.save();
            city1.save();
            city2.save();
        }
    }
});

行动之后＆＃34;保存＆＃34;执行，我在我的ember检查员中看到记录已创建，但似乎协会不起作用，因为应用程序模板没有像我期望的那样显示它们。

那么设置关联的正确方法是什么？

编辑3

由于我仍然不知所措的原因，即使使用DS.JSONSerializer.serializeHasMany的新实施，这种保存记录的策略仍然有效

country.get('cities').then(function(cities){
  return cities.pushObjects([city1,city2]);
});
city1.set('country', country);
city2.set('country', country);

country.save();
city1.save();
city2.save();

但这并不是：

country.get('cities').pushObjects([city1,city2]);
city1.set('country', country);
city2.set('country', country);

country.save();
city1.save();
city2.save();

编辑2

原来问题与问题Saving a model breaks one to many relationships中的问题完全相同。 DS.JSONSerializer.serializeHasMany的替代实现修复了它。

编辑1

@ steve-h在下面回答，建议不要将cities记录的country属性视为承诺。这不能以稍微不同的方式工作：

country.get('cities').pushObjects([city1,city2]);
city1.set('country', country);
city2.set('country', country);

country.save();
city1.save();
city2.save();

似乎country永远不会链接到两个cities：<ul>模板中的application无法显示任何city下的country新创建的country.get('cities').then(function(cities) { return cities.pushObject(city1); }); country.get('cities').then(function(cities) { return cities.pushObject(city2); }); city1.set('country', country); city2.set('country', country); country.save(); city1.save(); city2.save(); 。

进一步检查我原来的尝试，即

App.ApplicationRoute.Ember.Route.extend.actions.save (app.js:48)
triggerEvent                                         (ember.js:39606)
trigger                                              (ember.js:42157)
Router.trigger                                       (ember.js:41013)
EmberObject.extend.send                              (ember.js:39196)
Mixin.create.send                                    (ember.js:15451)
runRegisteredAction                                  (ember.js:34649)
-----> YAY !! at this point the associations are in place,
       and correctly displayed in the application template
Backburner.run                                       (ember.js:8160)
apply                                                (ember.js:7992)
run                                                  (ember.js:6626)
handleRegisteredAction                               (ember.js:34647)
(anonymous function)                                 (ember.js:22841)
x.event.dispatch                                     (jquery.js:5095)
v.handle                                             (jquery.js:4766)
-----> here the cities seems to disappear from the country record,
       and thus from the <ul> in the application template 

在上面的片段中有一个断点，我得到以下stacktrace

<ul>

总体效果是城市出现在我的{{1}}中几分之一秒然后消失。 这是jsbin with the live code。

Answer 1

你对承诺的解决是我认为你被挂断的地方。保证在承诺解决之前发生（您pushObject城市的地方）。我没试过这个，但我认为你需要做这样的事情：

save: function() {
    var store = this.store;

    var country = store.createRecord('countries', {
        'name': 'France'
    });
    var city1 = store.createRecord('cities', {
        'name': 'Paris'
    });
    var city2 = store.createRecord('cities', {
        'name': 'Marseille'
    });

    country.get('cities').pushObjects([city1,city2]);

    city1.save();
    city2.save();
    country.save();
}