Ember.js：重新加载页面时选择状态未保存在URL中 [英] Ember.js: select state not saved in URL when reload page

问题描述

在页面上选择选择国家，需要在URL中保存所选值。
我在路由驱动的控制器中声明了查询参数。
一切正常！如果国家/地区选择更改，则网址也会更改。

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.

演示： http://output.jsbin.com/releza

但是，如果我使用一些有效的GET参数重新加载页面，那么它将params转换为'undefined'。
例如，我尝试加载页面

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

，然后重定向到

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

为什么？

# 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":"Азейбарджан"},
    ],
  }
});

推荐答案

您正在使用 setupController 将数据提供给控制器。并且您将县属性设置为 store.find（）返回的承诺。

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

当页面加载时，Ember不等待该承诺解决。因此，选择框出现时没有条目，并且查询参数条目被视为不存在，并被未定义替换。

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.

要解决问题，请使用路线的模型钩子。然后，Ember将等待承诺在将单词传递给控制器​​之前解决，并且选择框将显示其预先加载的项目。

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.

演示： http://jsbin.com/citomu/1/edit?html,js,output

请注意，您没有遇到上一个问题的问题，因为Ember Data内部将记录ids转换为字符串。

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

这篇关于Ember.js：重新加载页面时选择状态未保存在URL中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！