Question

我正在尝试用Ember和Ember Data做一些非常基本的事情。

1）帖子属于用户;用户有很多帖子

2）在创建新帖子表格中，我希望选择/下拉所有用户

3）当我编辑帖子（使用相同的表单）时，我想将其正确绑定回dropbox

问题：执行与用户列表绑定的下拉列表的最佳做法是什么？如何绑定编辑表单以再次填充下拉列表？

用户模型：

App.User = DS.Model.extend({
  posts: DS.hasMany('post', {async: true}),
});

发布模型：

App.Post = DS.Model.extend(Ember.Validations.Mixin, {
  user: DS.belongsTo('user', {async: true}),
});

创建新帖子：

{{view Em.Select
  content=users <<<<< How do I bind this.store.find("user") here?
  optionValuePath='content.id'
  optionLabelPath='content.name'
}}

我不了解将选择内容与用户绑定的最佳做法。

尝试1：

*我使用的是Ember-Form

  {{em-select
    property="user_id"
    label="user"
    prompt="Select user:"
    content=controllers.users.content
    optionValuePath="content.id"
    optionLabelPath="content.first_name"
  }}

关于保存操作：

newItem.set('user', this.store.getById('user', this.get('user_id')));

我尝试使用user_id作为表单的属性，并在保存时转换回用户对象以分配给帖子。但是，这种方法有点愚蠢，因为我每次保存时都会主动将user_id转换为用户对象。我觉得应该有一种方法可以自动完成，如果我做了正确的绑定，而不是跳过箍来绑定属性user_id。当我使用相同的表单编辑帖子时，这也使我很难绑定回来。由于已经建立了所有的关系，我觉得我在这里做错了。我认为必须有更好的方法。

谢谢！

Answer 1

截至2014年9月，Ember.Select加{ async: true }存在问题。他们不能很好地合作。

myModel.get('myAsyncRel')将返回一个承诺，Ember.Select不承诺，所以它无法正确处理。

一种解决方法是使用非异步关系。

另一种解决方法是使用以下内容：

http://emberjs.jsbin.com/rwjblue/43/edit?html,css,js,output

Answer 2

ember团队已针对此问题打开an issue (#5259)，他们正计划重写整个Ember.Select部分。

在此期间，您可以使用this Add-on from thefrontside：

{{#x-select value=bob action="selectPerson"}}
  {{#x-option value=fred}}Fred Flintstone{{/x-option}}
  {{#x-option value=bob}}Bob Newhart{{/x-option}}
{{/x-select}}

使用ember install emberx-select

进行安装

编辑作为Stefan Penner wrote，您现在可以按如下方式使用余烬选择（jsbin）：

<select onchange={{action "changed" value="target.value"}}>
    {{#each model.choices key="@identity" as |choice|}}
      <option value={{choice}} selected={{is-equal currentValue choice}}>{{choice}}</option>
    {{/each}}
</select>

Answer 3

当你说下拉时，我认为你的意思是一个选择框？ Ember的API有一个处理所有数据绑定的选择视图。 Here are the docs for Ember.Select

您可以在帖子表单中使用它，如下所示：

{{view Em.Select
  content=users
  selection=user
  optionValuePath='content.id'
  optionLabelPath='content.name'
}}

如果您正在使用Dockyard's awesome ember-easyForm library，则可以使用Em.Select这样的内容：

{{input user type='as'
  collection='users'
  selection='user'
  optionValuePath='content.id'
  optionLabelPath='content.name'
  prompt='Choose type...'
}}

使用Chosen的高级用户界面可以轻松地与Ember like this集成。

Answer 4

在Ember 1.13中为Ember Select添加了新的弃用信息，请参阅http://emberjs.com/deprecations/v1.x/#toc_ember-select。

Ember 1.13 / 2.0中推荐的新方法是自己实现一个组件：

e.g。 /components/my-select.hbs

<select>
  {{#each users "id" as |user|}}
  {{log address}}
    <option value="{{user.id}}">
      user.name
    </option>
  {{/each}}
</select>

ember链接显示如何使用selected={{is-equal item selectedValue}}实现选择并创建is-equal帮助程序。

Ember Data属于选择下拉视图

4 个答案: