从EmberJS和ember-data中的选择表单中获取值

Question

我是Ember的新手,我正在创建一个具有一些模型关系的App.

这些是我的模特

// models/user.js
export default DS.Model.extend({
  name: DS.attr('string'),
  role: DS.belongsTo('role')
});

// models/role.js
export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string')
});

我的新用户路线是

import Ember from 'ember';

export default Ember.Route.extend({

  model: function(){
    return Ember.RSVP.hash({
      newUser: this.store.createRecord('user'),
      roles: this.store.findAll('role'),
    });
  }
});

想法是获取角色并在表单中的选择视图中进行选择

这是我创建新用户的模板

<form {{ action "save" on="submit" }}>
  {{ input value=newApplicant.name class="form-control" }}
  <select name="role" class="form-control" value="role.value">
       {{#each model.roles as |role|}}
             <option value="{{role.id}}">{{role.name}}</option>
       {{/each}}
  </select>

在此步骤之前一切正常,我选择了正确的数据,但我想保存,我不知道如何从表单中获取角色ID并插入用户

这是我的新控制器

import Ember from 'ember';

export default Ember.Controller.extend({

newUser: Ember.computed.alias('model.newUser'),
roles: null,
// roles: Ember.computed.alias('model.roles'),


actions: {
  save() {
    var role = this.get('role.value');
    console.log(role);
    //this.get('newUser').save().then((user) =>
    //  this.transitionToRoute('users', user.get('id'))
    //);
  },
});

我做了一些实验,但没有任何工作.当我在服务器中单击保存发送JSON请求时,在角色中为空值.

我已经按照本教程http://thau.me/2014/11/ember-data-mastering-async-relationships-part-2/

但是当我尝试过滤时,我得到了Null.

如何从选择表单中获取值？做这个的最好方式是什么？

顺便说一句,我使用的是Ember 2和ember数据2

Answer 1

您需要更新一些东西才能使其正常工作.

请参阅此文章以获取完整参考.

在模板端,select标签需要在change事件上发送值.我删除了value=""它并用onchange事件替换它.

<select name="role" class="form-control" onchange={{action "updateValue" value="target.value"}}>
 {{#each model.roles as |role|}}
  <option value="{{role.id}}">{{role.name}}</option>
 {{/each}}
</select>

然后,您需要在控制器中执行操作来处理此操作,updateValue操作将从选择框中接收值并将其设置为role.value属性,您可以稍后在save操作中检索该属性:

actions:{
  updateValue: function(value) {
    this.set('role.value', value);
  },
  save() {
   var role = this.get('role.value');
   console.log(role); // Now this should work
  }
}

我不认为select标签有值属性.

从本质上讲,问题是你的select标签在任何地方都没有绑定它的价值.对于更强大的选择组件,我强烈推荐使用ember-power-select.