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

Question

这是我在堆栈溢出中的第一篇文章，所以如果我不包括我应该包含的所有信息，不要对我太苛刻。

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

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

下面是显示select组件的工具栏模板的一部分

<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();
   }
   }
});

我假设来自作业-stat模型的name属性将保存在调查模型的jobStatus属性中。当显示编辑页时，没有选择正确的选项。当我选择一个值然后保存时，列表中显示的是对象。然后，当我再次编辑该项时，正确的选项将显示为选中。我似乎错误地定义了绑定，但我不知道如何使它工作。我尝试过在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'
  }
];

有人能帮忙吗。我已经搜索了互联网，试图找到一个与我的配置相匹配的工作示例，但大多数示例要么不使用either数据，要么使用控制器中定义的静态数据。

Answer 1

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

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

参见工作演示这里

而且，它将不是name属性，而是将保存的id属性，因为这对数据的规范化可能更好，不是吗？