Ember JS-通过查询参数添加选择框选项到URL字符串

Question

我在我的表单中有一个选择框，我希望能够将选择用作查询参数，以便我可以根据其选择来刷新模型。选择框来自此Ember附加。

{{#select-box/native value=sb name=module on-select=(action 'selected') class="form-control" as |sb| }}
          {{sb.option value='Select a Module:'}} {{sb.option value='Option1'}} {{sb.option value="Option2" }} {{sb.option value="Option3" }} {{sb.option value="option4" }}
        {{/select-box/native}}

"选定"操作只会将选项添加到变量中，以便以后可以在Switch语句中使用它：

selected(x) {
  module = x
},

我想在我的URL字符串中选择选择（或选择的表示形式），但我无法确定如何做出选择。我在URL字符串中构建了其他输入，但其中没有一个是选择框。

我的路线上的Queryparams中有一个"模块"项目，但它没有做任何事情，我怀疑我必须在"选定"操作中做点什么，但我不确定。

Answer 1

我尚未使用您提到的附加组件，但是这是您可以使用普通<select>进行操作的方法，因此只需桥接普通<select>与您所在的附加组件之间的差距在确保以下示例中的status变量根据您在选择框中选择的内容而使用的情况下，Ember将完成其余的内容。

这是一种配置，如果您想根据您从下拉列表中选择的状态值过滤用户列表，则可以使用：

// app/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
    name: DS.attr('string'),
    status: DS.attr('string')
});

// app/templates/users.hbs
<select onchange={{action (mut status) value="target.value"}}>
    <option value="" selected={{eq status ''}}>- All users -</option>
    <option value="active" selected={{eq status 'active'}}>Active</option>
    <option value="inactive" selected={{eq status 'inactive'}}>Inactive</option>
</select>
<ul>
    {{#each model as |user|}}
        <li>{{user.name}}, {{user.status}}</li>
    {{/each}}
</ul>

// app/controllers/users.js
import Controller from '@ember/controller';
export default Controller.extend({
    queryParams: ['status'],
    status: ''
});

// app/routes/users.js
import Route from '@ember/routing/route';
export default Route.extend({
    queryParams: {
        status: {
            refreshModel: true
        }
    },
    model(params) {
        var options = {};
        if (params.status) {
            options.status = params.status;
        }
        return this.get('store').query('user', options);
    }
});

它如何工作？

在控制器中，您定义了属性status，您还表示该属性是查询参数（在URL中）。然后，在路线中，您还将status定义为查询参数，它会刷新模型。在model()挂钩中，您提取参数并将其用于Ember数据存储的query()，每次更改状态值时，以获取模型。您的路线URL将附加?status=...，您的服务器将收到类似于example.com/api/users?status=...的请求。当然，您可以在model()挂钩中配置options，以格式化服务器的请求URL，但是我将其保留为简单。

唯一可能令人困惑的是模板文件。除了{{eq status '...'}}语法外，这是一个真实的帮助者，仅确定是否选择了该选项，其余的选择只是旨在更改status变量（在此处深入说明）。