Ember.js:绑定(bind)查询参数以选择异步加载内容的菜单

Question

我有一个带有国家过滤器的用户搜索表单。选择菜单(下拉菜单)中的国家/地区与 ember-data 异步加载。所选国家/地区绑定(bind)到查询参数:
https://myapp.com/users?country=123

工作 :当用户从选择菜单中选择一个国家时，URL 会更新并包含国家 ID

不工作 :当用户浏览回一个包含国家作为查询参数的 URL 时，选择菜单确实包含所有国家 但是 未选择正确的国家 + 查询参数未定义:/users?country=undefined

模板:

{{view "select" 
        content=countries 
        value=country
        optionLabelPath="content.name"
        optionValuePath="content.id"}}

Controller :

export default Ember.Controller.extend({

    countries: Ember.computed(function () {
        return this.store.find('country');
    }),

    country: null,

    queryParams: ['country'],

});

路线:

export default Ember.Route.extend({
    model: function (params) {
        return this.store.find('user', params);
    }
});

有什么建议么？谢谢! :)

Answer 1

我是如此接近!看来我加载国家/地区太晚了，因此选择没有与查询参数匹配的数据。

我只是将加载国家/地区的代码移动到 model钩:

model: function (params) {
    return Ember.RSVP.hash({
        users: this.store.find('user', params),
        // Pre-load the countries so the queryParams binding
        // with the select menu work properly
        countries: this.store.find('countries')
    });
},

现在似乎很明显，我找到了解决方案!