来自动态数据的 embjerjs select

embjerjs select from dynamic data

我正在使用没有 ember-data 的 ember-cli。

我有一个表单需要 select 下拉列表,该下拉列表是根据 api 响应的一些数据生成的。这是 api 响应:

{
  "data": [
    {
      "id": 1,
      "name": "host"
    },
    {
      "id": 2,
      "name": "cPanel"
    },
    {
      "id": 3,
      "name": "website"
    }
  ]
}

我正在使用 ember select 视图生成下拉菜单:

{{view "select" content=groups optionValuePath="content.id" optionLabelPath="content.name"}}

这是我的控制器:

groups: function(){
            var self = this;
            var model = this.get('model');
            var adapter = AddCredentialAdapter.create();
            var groups = adapter.findGroups(model.company_slug);
            return groups.then(function(response){
                return response;
            });
    }.property('credentialGroups', 'model')

我一直收到错误消息:

Assertion Failed: The value that #each loops over must be an Array. You passed {_id: 91, _label: undefined, _state: undefined, _result: undefined, _subscribers: }

所以我尝试这样做:

groups: function(){
            var self = this;
            var model = this.get('model');
            var adapter = AddCredentialAdapter.create();
            var groups = adapter.findGroups(model.company_slug);
            return groups.then(function(response){
                return response.map(function(c){
                    return {
                        id: c.id,
                        name: c.name
                    }
                });
            });
    }.property('credentialGroups', 'model')

但由于某种原因,承诺仍然是传递给视图的内容,我得到了同样的错误:

Assertion Failed: The value that #each loops over must be an Array. You passed {_id: 91, _label: undefined, _state: undefined, _result: undefined, _subscribers: }

如果我 console.log(response); 我没有得到承诺。我得到这个:

[Object, Object, Object, _super: function, nextObject: function, firstObject: Object, lastObject: Object, contains: function…]

是的,您肯定是想通过承诺设置 select 的内容 属性。计算出的 属性 不会像您希望的那样阻塞承诺的 return。解决方法:

groups: null,
setGroups: function(){
     var self = this;
     var model = this.get('model');
     var adapter = AddCredentialAdapter.create();
     var groups = adapter.findGroups(model.company_slug);
     groups.then(function(response){
         self.set('groups', response);
     });
}.observes('credentialGroups', 'model'),
//not sure how select handles null
initialize: function(){
    this.set('groups', []);
}.on('init')

这里的想法是 select 接受一个 属性 ,它由观察依赖键变化的函数设置。初始化代码可能需要也可能不需要。