Question

我在我的Ember.js项目中使用https://github.com/iStefo/ember-select-2中的ember-select-2组件。项目列表非常简单，使用路径中的Ember数据加载：

    setupController: function(controller, model) {
    this._super(controller, model);

    var otherModelsPromises = {
        accomodationTypes: this.store.find('accomodation-type'),

    };

    Ember.RSVP.hash(otherModelsPromises).then(function(results) {

        controller.set('accomodationTypes', results.accomodationTypes.get('content'));


    });

在我的模板中，我有：

{{select-2 placeholder="Filter By" content=accomodationTypes cssClass="search-filter-dropdown"}}

这是从URL（http://localhost:4200/api/accomodationTypes）

返回的JSON

{"accomodationTypes":[{"id":1,"text":"Bed & Breakfast","description":"","svgid":""},
{"id":2,"text":"Self Catering","description":"","svgid":""},
{"id":3,"text":"Hotel","description":"","svgid":""},
{"id":4,"text":"Boutique Hotel","description":"","svgid":""}]}

我可以看到承诺最终在路线和数据正确返回时得到解决。但是，当我尝试单击select2控件时，我在控制台中收到以下错误：

Uncaught Error: Assertion Failed: select2 has no content!

如果我在控制器中使用静态数据，它可以工作。我有一种感觉，因为在呈现select2组件时，promise没有解决，它会失败吗？似乎内容变量未设置为使用promises？我可以尝试使用查询，但我不希望类型提前查找。我只想显示一个简单的下拉列表，其中包含多个选项和删除选项。

我错过了什么或这是一个错误吗？

编辑：这是我正在使用的模型（models / accomodation-type.js）

import DS from 'ember-data';

export default DS.Model.extend({
    text: DS.attr('string'),
    description: DS.attr('string'),
    svgid:DS.attr('string'),

});

Answer 1

巴解......我明白了。我做了以下两个错误： 1.事实证明，在渲染视图之后调用setupController，以便视图在呈现时不会访问数据。所以，通过从模型钩子返回一个promise来纠正。这将使视图不被渲染，直到模型被解析。

import Ember from 'ember';
import DS from 'ember-data';
export default Ember.Route.extend({
model: function(params) {
    return Ember.RSVP.hash({
        listings: this.store.find('listing', params),
        accomodationTypes: this.store.find('accomodation-type')
    });



    },

});

更改模板中的select-2组件以使用以下内容：

{{select-2 placeholder="Filter by" searchEnabled=true allowClear=true multiple=true content=model.accomodationTypes cssClass="search-filter-dropdown"}}

它就像一个魅力！

使用带有Ember数据的ember-select-2

1 个答案: