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

Question

我的表单中有一个 Select 框，我希望能够使用 selection 作为查询参数，以便我可以根据其 [=30] 刷新模型=]离子。 Select 框来自 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}}

'selected' 操作只是将选项添加到变量，以便我稍后可以在 switch 语句中使用它：

selected(x) {
  module = x
},

我想在我的 URL 字符串中包含 selection（或 selection 的表示），但我不知道如何做。我在 URL 字符串中构建了其他输入，但其中 none 是 select 框。

我在路线的 QueryParams 中有一个 'module' 项目，但它没有做任何事情，我怀疑我必须在 'selected' 操作中做一些事情，但我没有当然可以。

Answer 1

我没有使用过你提到的附加组件，但这里是你如何使用普通 <select> 来做到这一点，所以只需弥合普通 <select> 和附加组件之间的差距您使用的是确保下面示例中的 status 变量根据您在 select 框中的 select 进行更改 - Ember 将完成其余的工作。

如果您想根据下拉列表中 select 的状态值过滤用户列表，这里有一个配置：

// 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 '...'}} 语法，它是 truth helper that simply determines whether the option is selected, the rest of the selecting simply aims to change the status variable (explained in depth here).

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

Ember JS - Add select box option to URL string via Query Param

ember.js

ember-data