Using ember-select-2 with Ember Data

Question

I am using the ember-select-2 component from https://github.com/iStefo/ember-select-2 in my Ember.js project. The list of items is fairly simple and is loaded using Ember data in the route:

    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'));


    });

And in my template, I have:

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

And here is the JSON being returned from the URL (http://localhost:4200/api/accomodationTypes)

{"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":""}]}

I can see the promise being eventually resolved in route and data being returned properly. However, when I try and click on the select2 control, I get the following error in console:

Uncaught Error: Assertion Failed: select2 has no content!

If I use a static data in the controller, it works. I have a feeling that because the promise is not resolved by the time the select2 component is rendered, it fails? And it seems like the content variable is not set to use promises? I could try and use a query, but I do not want a type ahead lookup. I just want to display a simple dropdown with multiple options and option to delete.

Am I missing something or is this a bug?

Edit: Here is the model that I'm using (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'),

});

MojoJojo MojoJojo · Accepted Answer · 2015-11-16T21:43:09

Bah..I figured it out. I was doing the following two this wrong: 1. Turns out that setupController is called after the view has been rendered so the view won't have access to data when it gets rendered. So, corrected by returning a promise from model hook. This will keep the view from rendering until the models are resolved.

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



    },

});

Changed the select-2 component in the template to use the below:

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

And it works like a charm!

Using ember-select-2 with Ember Data

1 Answers