将 ember-select-2 与 Ember 数据一起使用答案

【问题标题】：Using ember-select-2 with Ember Data将 ember-select-2 与 Ember 数据一起使用
【发布时间】：2016-02-17 22:06:42
【问题描述】：

我在我的 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 还没有解决，所以它失败了？似乎内容变量未设置为使用承诺？我可以尝试使用查询，但我不想要类型提前查找。我只想显示一个简单的下拉菜单，其中包含多个选项和删除选项。

是我遗漏了什么还是这是一个错误？

编辑：这是我正在使用的模型 (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'),

});

【问题讨论】：

标签： ember.js ember-data

【解决方案1】：

呸..我想通了。我做错了以下两个： 1. 结果显示，setupController 是在视图渲染后调用的，因此视图在渲染时将无法访问数据。因此，通过从模型钩子返回一个承诺来纠正。这将阻止视图渲染，直到模型被解析。

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"}}

它就像一个魅力！

【讨论】：