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

Question

我的表单中有一个选择框，我希望能够将选择用作查询参数，以便我可以根据其选择刷新模型。选择框来自this ember add-on。

{{#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 Data Store 的 query() 以在每次更改状态值时获取模型。您的路由 URL 将附加?status=...，并且您的服务器将收到类似于example.com/api/users?status=... 的请求。当然，你可以在model()钩子中配置options以不同的方式来格式化服务器的请求URL，但为了简单起见，我保持这样。

唯一可能令人困惑的是模板文件。除了{{eq status '...'}} 语法truth helper 只是简单地确定选项是否被选中之外，其余的选择只是旨在更改status 变量（深入解释here）。