Ember Data принадлежит с раскрывающимся списком Select

Я пытаюсь сделать что-то довольно простое с Ember и Ember Data.

1) Сообщения принадлежат пользователям; Пользователи hasMany Posts

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. Это также затрудняет привязку назад, когда я использую ту же форму для редактирования сообщения. Поскольку все отношения были установлены, у меня возникает ощущение, что я делаю что-то неправильно здесь. Я думаю, что должен быть лучший способ.

Спасибо!

Ответы

Ответ 1

По состоянию на сентябрь 2014 года существует проблема с Ember.Select plus { async: true }. Они не хорошо играют вместе.

myModel.get('myAsyncRel') вернет обещание, Ember.Select не обещает знать, поэтому он не может справиться с этим должным образом.

Один способ обхода - использовать неасинхронные отношения.

Другим обходным решением является использование чего-то вроде этого:

Ответ 2

Команда ember открыла проблему (# 5259) для этой проблемы, они планируют переписать всю часть Ember.Select.

Тем временем вы можете использовать это дополнение от 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 , теперь вы можете использовать выбор ember следующим образом (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>

Ответ 3

Когда вы говорите выпадающее меню, я предполагаю, что вы имеете в виду поле выбора? У Ember API есть выбор, который обрабатывает все привязки данных. Вот документы для Ember.Select.

Вы можете использовать его в своей почтовой форме, например:

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

Если вы используете Dockyard 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 это.

Ответ 4

Новая информация об устаревании была добавлена ​​в Ember 1.13 для Ember Select, см. http://emberjs.com/deprecations/v1.x/#toc_ember-select.

Новый рекомендуемый подход в Ember 1.13/2.0 - это реализовать компонент самостоятельно:

например. /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.