Ember 路由中的查询参数 VS 控制器中的查询参数

Question

我对 Ember 文档中的 queryParams 感到困惑。说明可以把queryParams放到Controller或者Route中。 Route 与 Controller 中的 queryParams 除了语法之外有什么区别？

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

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

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

Answer 1

您可以使用控制器设置 queryParams 的默认值，将 queryParam 值绑定到模板中的值，以及更新 queryParam 值。当这些值在控制器中发生变化时，控制器会更新 url，并且路由采用 url 值，以便您可以进行 ember 数据请求。

假设您正在呈现一个分页的项目列表，页面上有分页控件。在初始页面加载时，您从 API 加载第一页结果。为了link上那个'next page'动作加载下一组结果，需要使用controller来更新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 属性时，这将绑定到路由并刷新模型，加载下一页数据。

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

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

希望对您有所帮助！ (:

Ember 路由中的查询参数 VS 控制器中的查询参数

Ember queryParams in Route VS in Controller

ember.js

ember-data