控制器中 Route VS 中的 Ember queryParams答案

【问题标题】：Ember queryParams in Route VS in Controller控制器中 Route VS 中的 Ember queryParams
【发布时间】：2018-09-07 13:32:39
【问题描述】：

我对 Ember 文档中的 queryParams 感到困惑。它表明您可以将 queryParams 放入 Controller 或 Route。除了语法之外，Route 和 Controller 中的 queryParams 有什么区别？

据我了解，将 queryParams 作为 Route 中的对象允许我执行以下操作：

使用 replace: true 和 refreshModel 选项。
比控制器更快地捕获 queryParams。
模型挂钩可以接收参数值

在什么情况下你会选择在 Controller 中使用 queryParams？

【问题讨论】：

标签： ember.js ember-data

【解决方案1】：

您可以使用控制器为 queryParams 设置默认值，将 queryParam 值绑定到模板中的值，以及更新 queryParam 值。当控制器中的这些值发生变化时，控制器会更新 url，并且路由会获取 url 值，以便您可以发出 ember-data 请求。

假设您正在渲染一个分页的项目列表，页面上有分页控件。在初始页面加载时，您从 API 加载结果的第一页。为了链接“下一页”操作以加载下一组结果，您需要使用控制器来更新 queryParams。

您的路线可能如下所示：

 export default Route.extend({
  queryParams: {
    pageNumber: {
      refreshModel: true //when we set this to true, every time the pageNumber param changes, the model hook below will refresh and the data set will update.
    }
  },

  model(params) {
   return this.get('store').query('items', params);
  }

 });

您的控制器可能如下所示：

export default Controller.extend({
  queryParams: ['pageNumber'],
  pageNumber: 1,

  actions: {
    nextPage () {
      const newPageNumber = this.get('pageNumber') + 1;
      this.set('pageNumber', newPageNumber);
    }
  }
});

当您更新控制器中的pageNumber 属性时，这将绑定到路由并刷新模型，加载下一页数据。

如果您需要修改模板中的任何查询参数，基本上控制器就在那里。您可能有一个可以过滤、分页、更新等的数据列表，您可以使用控制器控制这些参数。

您还可以在控制器中设置参数的默认值。

希望这有帮助！（：

【讨论】：

我发现 Controller 的 queryParams 中提到的默认值特别有用。感谢您提供如此详细而详细的答案！ ✨
所以 route 的 queryParams 更多的是对 controller 的 queryParams 的补充。 Ember doc 根本没有提到这种关系。谢谢你的回答。