Ember.js: bind query param to select menu whose content is loaded asynchronously -

Ember.js: bind query param to select menu whose content is loaded asynchronously -

i have user search form country filter. countries in select menu (drop down) loaded asynchronously ember-data. selected country bound query param:

https://myapp.com/users?country=123

working: when user selects country select menu, url updated , contains country id not working: when user browses url containing country query parameter, select menu contain countries but not selecting right country + query param becomes undefined: /users?country=undefined

template:

{{view "select" content=countries value=country optionlabelpath="content.name" optionvaluepath="content.id"}}

controller:

export default ember.controller.extend({ countries: ember.computed(function () { homecoming this.store.find('country'); }), country: null, queryparams: ['country'], });

route:

export default ember.route.extend({ model: function (params) { homecoming this.store.find('user', params); } });

any suggestions? thanks! :)

i close! appeared loading countries late, hence select had no info match query parameter.

i moved code loading countries in model hook:

model: function (params) { homecoming ember.rsvp.hash({ users: this.store.find('user', params), // pre-load countries queryparams binding // select menu work countries: this.store.find('countries') }); },

it seems obvious have found solution!

ember.js