Ember.js select view helper selectionBinding не работает

Question

Это мой первый пост в stackru, так что не переживайте, если я не включу всю информацию, которую должен.

Поэтому я начинаю использовать Ember.js для доработки нашего пользовательского интерфейса и пытаюсь добавить помощники вида на страницу редактирования. На этой странице используются 4 объекта модели, которые установлены на контроллере для страницы редактирования в маршруте редактирования. Первая модель (опрос) содержит основные данные обследования. Другие 3 модели содержат данные для опций в 3 раскрывающихся списках на странице. Модель опроса содержит хранилище для выбранных значений для каждого из 3 элементов управления выбором. У меня проблема в том, что когда я выбираю опрос для редактирования на странице списка, где отображаются все опросы, в раскрывающихся списках не отображается текущее значение. Затем, когда я выбираю значение и сохраняю изменения, представление списка показывает выбранное значение как объект вместо имени. Например, вместо "Все". Затем, когда я выбираю тот же опрос для редактирования, он показывает правильное выбранное значение в раскрывающемся списке. Так что это вроде работает, но я не могу заставить его привязаться к имени, чтобы в списке отображалось правильное значение.

Я включу как можно больше кода, чтобы показать, как настроены данные. Я использую Ember-Cli и Ember-Data

Вот маршрут редактирования

import Ember from 'ember';

export default Ember.Route.extend({

model: function (param) {
var _this = this;
var surveyId = param.id;

return Ember.RSVP.hash({
    survey: _this.store.find('survey', surveyId),
    jobStats: _this.store.find('job-stat'),
    completionStages: _this.store.find('completion-stage'),
    surveyNames: _this.store.find('survey-name')
});
},

  setupController: function (controller, model) {

  controller.set('survey', model.survey);
  controller.set('jobStats', model.jobStats);
  controller.set('completionStages', model.completionStages);
  controller.set('surveyNames', model.surveyNames);

}
});

Вот модель опроса

import DS from 'ember-data';

export default DS.Model.extend({

    name: DS.attr(),
    jobStatus: DS.attr(),
    surveyStatus: DS.attr(),
    .....
});

Вот модель работы-статистики

import DS from 'ember-data';

export default DS.Model.extend({
  name:   DS.attr()
});

Вот часть шаблона руля, который показывает выбранный компонент

<div class="control-group span12">
     <label class="control-label">Job Status:</label>
     {{view "select" class="span3"
            contentBinding="jobStats"
            optionValuePath="content.id"
            optionLabelPath="content.name"
            selectionBinding="survey.jobStatus"
     }}
 </div>

Вот контроллер для редактирования маршрута, только если метод сохранения оказывает какое-либо влияние на проблему

import Ember from 'ember';

export default Ember.Controller.extend({

actions: {
   save: function () {
      console.log('edit survey controller: save');
      var survey = this.get('survey');
      survey.save();
      this.transitionToRoute('surveys');
   },
   cancel: function() {
      console.log('edit survey controller: cancel');
      var survey = this.get('survey');
      survey.rollback();
      this.transitionToRoute('surveys');
   },
   reset: function() {
      console.log('edit survey controller: reset');
      var survey = this.get('survey');
      survey.rollback();
   }
   }
});

Я предполагал, что свойство name из модели job-stat будет сохранено в свойстве jobStatus модели опроса. Тот факт, что при отображении страницы редактирования правильный вариант не выбран. Когда я выбираю значение, а затем сохраняю, в списке отображается объект. Когда я снова редактирую элемент, правильный вариант отображается как выбранный. Кажется, что я определил привязку неправильно, но я не уверен, как заставить это работать. Я попытался использовать привязку к идентификатору, но в результате в списке вместо идентификатора отображался идентификатор.

Я использую Pretender для поддержки вызовов API, и он имеет тестовые данные для всех моделей. Вот данные опроса и данные статистики работы.

var surveys = [
   {
     id: 1,
     name: 'Gas Survey',
     jobStatus: 'Newly Created',
     ....
  }
];


var jobStats = [
  {
   id: 1,
   name: '[all]'
  },
  {
    id: 2,
    name: 'Newly Created'
  },
  {
    id: 3,
    name: 'Make First App'
  },
  {
    id: 4,
    name: 'Gas Waiting First Appointment'
  }
];

Пожалуйста, кто-нибудь может помочь с этим. Я искал в интернете, пытаясь найти рабочий пример, который соответствует моей конфигурации, но большинство примеров либо не используют ember-data, либо используют статические данные, определенные в контроллере.

Answer 1

Вместо selectionBinding, вы должны использовать value как в:

 {{view "select" class="span3"
        content=statuses
        optionValuePath="content.id"
        optionLabelPath="content.name"
        value=survey.jobStatus
 }}

Смотрите рабочую демонстрацию здесь

Кроме того, это не будет name собственность, а точнее id свойство, которое будет сохранено, так как это, вероятно, лучше для нормализации ваших данных, не так ли?