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

时间:2017-12-04 19:01:59

标签: javascript ember.js

我目前有一个包含多个输入的表单。这些输入用于填充查询参数。在此路由的控制器上,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字符串中的查询参数加倍。我最终还会遇到糟糕的param更新行为,这会影响我在输入更改时重新运行查询的能力。

  • 如果我没有在嵌套路由中包含queryParams对象 查询不会触发,也不会生成任何内容。

  • 如果我没有在我收到的嵌套路由中为queryParams添加别名 错误告诉我,我不能有重复的键值 多个控制器。

  • 我尝试使用paramsFor代替上面的queryParams而且可以 不会产生结果。

我也无法再次按“提交”按钮以启动新查询。我认为这是因为我试图转换到已经加载的路由。

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

This question似乎非常相似,但不幸的是,没有多少答案可供使用。

任何人都可以发现我的大错误或指向正确的方向吗? EmberJS指南中提供的文档对我目前的理解没有帮助。

1 个答案:

答案 0 :(得分:0)

我设法通过改变我的方法来解决这个问题。

不是按照我的问题在控制器上处理查询参数,而是使用{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)

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

我不知道以上是否是最佳做法,但它让我和我的子路由的实时刷新运行。