Question

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

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

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

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

Answer 1

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

当页面加载时，Ember不会等待该承诺解决。因此，显示的选择框没有条目，查询参数条目被视为不存在，并由undefined替换。

要解决此问题，请使用路由的model挂钩。然后Ember会在将单词传递给控制器之前等待承诺解决，然后会出现选择框并预装其项目。

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

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

Ember.js：重新加载页面时选择未保存在URL中的状态

1 个答案: