将 emberjs 查询参数的作用域限定为控制器

Scoping emberjs query params to the controller

本文关键字：控制器 作用域 emberjs 查询 参数      更新时间：2023-09-26

>我在余烬中有一条路由，定义如下：

this.route('products', { path: '/t' }, function() {
  this.route('index', { path: '/:taxon' });
});

所以我能够访问以下网址：

    /
  • T/衬衫
    • /
  • t/鞋
    • /
  • t/etc...

其中每个参数也可能具有一系列查询参数。例如，我可以要求像这样的红色衬衫/t/shirts?colour=red.这很好，但我想跨控制器实例而不是模型保留查询参数。因此，如果我搜索红色衬衫，然后过渡到查看鞋子（通过 {{#link-to}}），那么查询参数也将在该路由上可用，即 /t/shoes?colour=red .目前我似乎无法做到这一点。

我在 ember 文档中发现了对某些内容的引用，该文档指出我可以将showMagnifyingGlass的范围设置为"控制器"，这将完成我的意图，但它似乎不起作用。我和showMagnifyingGlass的棍子一端是错误的吗？我相信这样做的重点是将查询参数的范围限定为控制器实例而不是模型，这样，如果我单击更改路由模型的链接，它不会影响查询参数。

这是我包含在控制器中的内容：

queryParams: [{
  showMagnifyingGlass: {
    scope: 'controller' // Scope the parameters to the controller so transitions share state.
  }
}]

您可以通过在顶级控制器上定义查询参数来实现此目的：

应用/产品/控制器.js 

import Ember from 'ember';
export default Ember.Controller.extend({
  queryParams: ['color'],
  color: 'red'
});

然后将顶级控制器注入任何其他控制器：

应用程序/产品/索引/控制器.js

import Ember from 'ember';
export default Ember.Controller.extend({
  productsController: Ember.inject.controller('products'),
  color: Ember.computed.reads('productsController.color')
});

然后在其他控制器的链接上设置顶级查询参数：

app/products/index/template.hbs

{{link-to 'shirts' (query-params color=color)}}
{{link-to 'pants' (query-params color=color)}}
{{link-to 'shoes' (query-params color=color)}}

下面是上面代码的余烬，以及有关将控制器相互注入的更多信息。

相关文章：