Ember.js 选择视图助手 selectionBinding 不起作用

Question

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

所以我开始使用 Ember.js 来重新设计我们的 UI，并一直在尝试将选择视图助手添加到编辑页面。该页面上使用了 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();
   }
   }
});

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

我正在使用 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

您应该使用value 而不是selectionBinding，如下所示：

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

查看工作演示 here

另外，它不会是 name 属性，而是 id 属性将被保存，因为无论如何这对于数据的规范化可能更好，不是吗？