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}}

选择＆＃39; action只是将选项添加到变量中，以便稍后在switch语句中使用它：

selected(x) {
  module = x
},

我想在我的网址字符串中进行选择（或选择的表示），但我无法解决问题。我有其他输入构建到URL字符串中，但没有一个是选择框。

我有一个＆＃39;模块＆＃39;我的路线上的QueryParams中的项目，但它没有做任何事情，我怀疑我必须在所选的＆＃39;中做一些事情。行动，但我不确定是什么。

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()，以便在每次更改状态值时获取模型。您的路线网址会附加?status=...，您的服务器将收到类似example.com/api/users?status=...的请求。当然，您可以不同地在options挂钩中配置model()以格式化服务器的请求URL，但为了简单起见，我保持这样。

唯一可能令人困惑的是模板文件。除了{{eq status '...'}}语法，它只是一个truth helper来确定是否选择了该选项，其余的选择只是为了更改status变量（深度解释{{3 }}）。

Ember JS - 通过Query Param向URL字符串添加选择框选项

1 个答案: