如何在Ember.js中将多个选择添加到多对多模型中？

Question

我有这个small app，我正在尝试将多个Ember.Select的水果选择添加到模型的属性，人物爱丽丝的“myfruits”。然而，事情已经破裂。

也许我的模型设置不正确。

这是html中的Ember.Select把手：

  {{view Ember.Select
      multiple="true"
      contentBinding="App.fruits"
      valueBinding="pickedFruits"
  }}

这是模型：

App.Person = DS.Model.extend({
  name: DS.attr('string'),
  myfruits: DS.hasMany('App.Fruit')
});

App.Fruit = DS.Model.extend({
  kind: DS.attr('string'),
  likedBy: DS.hasMany('App.Person')
});

这是尝试保存多项选择的功能：

 pickThem: function(){
    var input_fruits = this.get('pickedFruits');
    // should I create a Fruit object for each input_fruits?
    var aperson = App.Person.createRecord({
      name: "Alice",
      myfruits: input_fruits
    });
    aperson.save();
 }

我觉得问题可能是我没有创建Fruit对象。但我不确定如何使它与人与水果之间的多对多关系起作用。

Answer 1

我想你需要做的就是你已经提到的为每个选定的水果创建一个App.Fruit记录并将其添加到新创建的App.Person。

基本上重要的是：

App.PersonController = Ember.ArrayController.extend({
  pickThem: function(){
    var aperson = App.Person.createRecord({name: "Alice", myfruits: []});
    this.get('pickedFruits').forEach(function(item){
      aperson.get('myfruits').pushObject(App.Fruit.createRecord({kind:item, likedBy:[aperson.get('id')]}));
    });

    aperson.save();
  }
});

然后为您的person模板提供模型：

App.PersonRoute = Ember.Route.extend({
  model: function() {
    return App.Person.find();
  }
});

并且在你的模板中，你可以遍历人员记录，并在其循环内循环各自的成果：

{{#each model}}
  {{name}} likes are:
  {{#each myfruits}}
    {{kind}}
  {{/each}}
{{/each}}

查看此更新的jsbin。

但是，您应该重置本地存储适配器的数据，以避免在每次应用程序初始化后出现多个条目。我通过为LSAdapter的命名空间创建一个伪随机后缀来完成它，但这可能是你觉得更方便的任何东西。

App.LSAdapter = DS.LSAdapter.create({
  namespace: 'app-emberjs-'+Math.floor(Math.random()*1000)
});

希望它有所帮助。

修改

阅读完您的上一条评论后，只是为了显示LSAdapter存储数据的Chrome调试工具中的情况。看看下面的截图。在这里，我重新加载了2次app，正如预期的那样，创建了两个名称空间。如果每次事物重叠时都有相同的命名空间，则会导致一些意外行为。