Ember 添加有许多要从下拉列表中选择的子模型

Question

在 Ember 中，我有两个模型，Product 和 Genre，Product 有很多 Genres，设置如下。

App.Product = DS.Model.extend({
  title: DS.attr(),

  genres: DS.hasMany('genre')
});


App.Genre = DS.Model.extend({
  name: DS.attr(),

  product: DS.belongsTo('product')
});

流派可以在单独的页面上创建，然后可以通过 select 从 select 元素中为产品页面上的产品设置多个流派，并可以选择添加额外的流派。控制器和模板设置如下。

App.ProductController = Ember.ObjectController.extend({
  availableGenres: function() {
    return this.store.findAll('genre');
  }.property(),
  actions: {
    saveProduct: function() {
      var product = this.get('model');
      product.save();
    },
    addGenre: function() {
      var product = this.get('model');
      var genre = this.store.createRecord('genre');
      product.get('genres').pushObject(genre);
    }
  }
});

和模板：

{{#each genre in genres}}    
{{view "select" content=availableGenres value=genre.name}}
{{/each}}
<button {{action 'addGenre'}}>Add Genre</button>

通俗地说，addGenre 函数应该向 UI 添加新的 select，允许用户从预定义的流派集中 select。

目前的设置方式会创建一个新的流派，这是不正确的。我无法解决的是我应该如何在视图中创建新类型 select，而不创建新类型。

如何在不创建新流派的情况下为流派创建新的 select？将它设置为 possibleGenres 中的第一个流派就足够了，但我一直在研究如何 select 该函数中的第一个流派。我是 Ember 的新手，非常感谢任何帮助！

Answer 1

这是因为您的 addGenre 创建了新的流派...:)

 addGenre: function() {
      var product = this.get('model');
      var genre = this.store.createRecord('genre'); //here you create a new genre
      product.get('genres').pushObject(genre); //and then you push the object
    }

从 select doc 你的 select 应该看起来像：

{{view "select"
       content=availableGenres 
       optionValuePath="content" 
       optionLabelPath="content.name"
       value=selectedGenre}}

那么您只需修改您的 addGenre 方法

addGenre: function() {
          this.get('model.genres').pushObject(this.get('selectedGenre'));
          //and eventually persist save by making a this.get('model').save() :)
        }

编辑在第一个视图 select 之后添加以下内容

{{#each genre in model.genres}}
   {{view "select"
           content=availableGenres 
           optionValuePath="content" 
           optionLabelPath="content.name"
           value=genre}}
{{/each}}

它所做的是，每次您单击调用 addGenre 操作时，它都会将此 "genre" 添加到您的对象中，每个只列出对象中已有的流派，并允许您即时编辑它们.

Ember 添加有许多要从下拉列表中选择的子模型

Ember Adding Has Many Child Model to be Selected from Drop Down

javascript

ember.js

ember-data