Question

我是Ember的新手，我正在创建一个有一些模特关系的应用程序。

这些是我的模特

// 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。

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

BTW，我使用的是Ember 2和ember data 2

Answer 1

您需要更新一些内容才能使其正常工作。

请参阅this twiddle以获取完整参考。

在模板方面，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。

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

1 个答案: