Ember.js: select state not saved in URL when reload page

Question

There are select on the page for choosing country and it's need to save selected value in URL. I declared query params in route-driven controllers. It's all work! If country select is changed then url also changed.

Demo: http://output.jsbin.com/releza

But if I reload page with some valid GET params then it params convert to 'undefined'. For example, I try to load page

http://output.jsbin.com/releza#/?country=2

and it redirect to

http://output.jsbin.com/releza#/?country=undefined

Why?

# index.hbl
<script type="text/x-handlebars" id="index">
    {{view "select" content=countries   
                  optionValuePath="content.id" 
                  optionLabelPath="content.name"  
                  value=country
                  prompt="Select a country"}}
</script>

# apps.js
App = Ember.Application.create({});

// ROUTES
App.IndexRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('countries', this.store.find('country'));
    }
});

// CONTROLLERS
App.IndexController = Ember.Controller.extend({
    queryParams: ['country'],
    country: null,
});

// MODELS
App.Country = DS.Model.extend({  
    name: DS.attr('string'),
});

$.mockjax({
  url: "/countries",
  dataType: 'json',
  responseText: {
    "country": [
      {"id":1, "name":"Абхазия"},
      {"id":2, "name":"Австралия"},
      {"id":3, "name":"Австрия"},
      {"id":4,"name":"Азейбарджан"},
    ],
  }
});

Andrey Mikhaylov - lolmaus · Accepted Answer · 2015-06-09T15:07:28.663

1

You're using setupController to feed data into the controller. And you set the counties property to a promise returned by store.find().

When the page loads, Ember does not wait for that promise to resolve. Thus, the select box appears with no entries, and the query params entry is considered non-existing and replaced by undefined.

To resolve the issue, use the route's model hook. Then Ember will wait for the promise to resolve before passing the word to the controller, and the select box will appear with its items preloaded.

Demo: http://jsbin.com/citomu/1/edit?html,js,output

Note that you're not experiencing the issue from your previous question because Ember Data internally converts record ids to strings.

edited Jun 09 '15 at 15:07

answered Jun 09 '15 at 14:47

Andrey Mikhaylov - lolmaus

23,107
6
84
133

And what if I need two models (and two select accordingly). For example, country and city. How can I represent city in this case? – Victor Bornov Jun 09 '15 at 16:18
I found answer for two models on one route http://stackoverflow.com/questions/20521967/emberjs-how-to-load-multiple-models-on-the-same-route – Victor Bornov Jun 09 '15 at 17:56
The "beware" answer is pretty complicated. I showed you a simple solution with sideloading. – Andrey Mikhaylov - lolmaus Jun 09 '15 at 17:59
Oh, I didn't see your answer. it is just what I need http://jsbin.com/citomu/2/edit?html,js,output Thank you so much! – Victor Bornov Jun 09 '15 at 18:25

Ember.js: select state not saved in URL when reload page

1 Answers1

Linked