EmberJS - 将查询参数从控制器传递到嵌套路由答案

【问题标题】：EmberJS - Passing Query Params from Controller to Nested RouteEmberJS - 将查询参数从控制器传递到嵌套路由
【发布时间】：2017-12-04 19:01:59
【问题描述】：

我目前有一个包含多个输入的表单。这些输入用于填充查询参数。在此路由的控制器上，Submit 操作注册查询参数输入并使用 transitionToRoute 加载嵌套路由，显示查询返回的信息。

这里是控制器的相关部分：

import Controller from '@ember/controller';

export default Controller.extend({

  queryParams: ['dateFrom', 'dateTo', 'unitNumber', 'customerName'],
  dateFrom: null,
  dateTo: null,
  unitNumber: null,
  customerName: null,

actions: {
    submitQuery() {
      switch (module) {
        case 'Option 1 List':
          this.transitionToRoute('reports.option1', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber'),
             customerName: this.get('customerName'),
          },
      })

          break;
}

这是嵌套的路由：

import Route from '@ember/routing/route';

export default Route.extend({
  queryParams: {
  dateFrom: { as: 'meddateFrom',
refreshModel:true},
  dateTo: { as: 'meddateTo', refreshModel:true},
  unitNumber: { as: 'medunitNumber', refreshModel:true},
  customerName: { as: 'medcustomerName', refreshModel:true},
},

  model(params) {

      return this.get('store').query('option1api', params)

      },

});

我必须在这里做一些非常错误的事情，因为这会产生一些可怕的行为。我最终得到双倍的 URL 字符串中的查询参数。我最终也会遇到错误的参数更新行为，这会影响我在输入更改时重新运行查询的能力。

如果我没有在嵌套路由中包含 queryParams 对象查询不会触发，也不会产生任何结果。
如果我不对我收到的嵌套路由中的 queryParams 起别名错误告诉我我不能有重复的键值多个控制器。
我尝试使用 paramsFor 而不是上面的 queryParams 并且可以不产生结果。

我也无法再次按下提交按钮来启动新的查询。我认为这是因为我正在尝试转换到已加载的路线。

我考虑将 queryParams 从控制器移动到父路由 (reports.js)，但据我了解，我需要控制器在第一个实例中设置 queryParams。

This question 似乎非常相似，但遗憾的是没有太多可用的答案。

谁能发现我的大错误或指出我正确的方向？ EmberJS 指南中提供的文档对我目前的理解没有帮助。

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

我设法通过改变方法自己解决了这个问题。

我没有按照我的问题处理控制器上的查询参数，而是使用 {refreshModel:true} 选项将它们移动到父路由。

在嵌套路由中我添加了以下内容：

let dateFrom = this.paramsFor('reports').dateFrom
let dateTo = this.paramsFor('reports').dateTo
let unitNumber = this.paramsFor('reports').unitNumber
let customerName = this.paramsFor('reports').customerName

let hash = {dateFrom, dateTo, unitNumber, customerName}

return this.get('store').query('mymodel', hash)

这证实了我的子路由能够读取查询参数，然后我可以使用这些变量为我的模型查询构造一个哈希。

我不知道上述是否是最佳做法，但它让我启动并运行了我的子路由的实时刷新。

【讨论】：