Ember.js选择“视图帮助程序选择绑定不起作用”

Question

这是我在stackoverflow中的第一篇文章，所以如果我没有包含我应该包含的所有信息，请不要对我太苛刻。

所以我开始使用 Ember.js 来重新设计我们的 UI，并一直在尝试将选择视图帮助程序添加到编辑页面。该页面上正在使用 4 个模型对象，这些对象在编辑器上为编辑路由中的编辑页面设置。第一个模型（调查）包含主调查数据。其他 3 个模型包含页面上 3 个下拉列表中的选项数据。调查模型包含 3 个选择控件中每个控件的选定值的存储。我遇到的问题是，当我从显示所有调查的列表页面中选择要编辑的调查时，下拉列表不显示当前值。然后，当我选择一个值并保存更改时，列表视图将所选值显示为对象而不是名称。F.D. 而不是"全部"。然后，当我选择相同的调查进行编辑时，会在下拉列表中显示正确的所选值。所以它有点工作，但我似乎无法让它绑定在名称上，以便在列表中显示正确的值。

我将包含尽可能多的代码，以显示数据是如何配置的。我正在使用 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();
   }
   }
});

我假设作业统计模型中的名称属性将保存在调查模型的 jobStatus 属性中。显示编辑页面时未选择正确选项的事实。当我选择一个值然后保存时，列表中显示的是对象。然后，当我再次编辑该项目时，正确的选项显示为选中。似乎我错误地定义了绑定，但我不确定如何让它工作。我尝试在 id 上使用绑定，但这只导致列表显示 id 而不是名称。

我正在使用伪装者来支持 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属性，因为无论如何，这可能更适合数据的规范化，不是吗？