Question

我对Ember文档中的queryParams感到困惑。它显示您可以将queryParams放置到Controller或Route。除了语法，在Route vs Controller中使用queryParams有什么区别？

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

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

在哪种情况下，您会选择在Controller中使用queryParams？

Answer 1

您可以使用控制器为queryParams设置默认值，将queryParam值绑定到模板中的值，并更新queryParam值。当控制器中的这些值更改时，控制器将更新url，并且路由将采用url值，以便随后可以发出余烬数据请求。

比方说，您正在渲染页面的分页列表，页面上带有分页控件。在初始页面加载中，您从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，则基本上是控制器。您可能具有可以过滤，分页，更新等数据的列表，并且可以使用控制器来控制这些参数。

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

希望这会有所帮助！（：

控制器中Route VS中的Ember queryParams

1 个答案: