控制器中路径VS中的Ember queryParams

Question

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

据我所知，在Route中将queryParams作为对象允许我做以下事情：

1. 使用replace：true和refreshModel选项。
2. 捕获queryParams比控制器更快。
3. 模型钩子可以接收参数值

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

Answer 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属性时，它将绑定到路径并刷新模型，加载下一页数据。

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

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

希望这有用！ （：