粘性查询参数值（Sticky Query Param Values）

优质

小牛编辑

129浏览

2023-12-01

在Ember中，查询参数值默认为sticky; 在对查询参数进行任何更改的方式中，将通过重新输入路由来保留查询参数的新值。

语法 (Syntax)

Ember.Controller.extend ({
   queryParams: ['paramValue'],
   paramValue:true/false
});

例子 (Example)

下面给出的示例指定粘滞查询参数值的使用。创建一个新路由并将其命名为stickyqueryparam并打开router.js文件以定义URL映射 -

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 
//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});
//Defines URL mappings that takes parameter as an object to create the routes
Router.map(function() {
   this.route('stickyqueryparam');
});
//It specifies Router variable available to other parts of the app
export default Router;

使用以下代码打开在app/templates /下创建的application.hbs文件 -

<h2>Sticky Query Param Values</h2>
{{#link-to 'stickyqueryparam'}}Click here to open the page{{/link-to}}

单击上面的链接时，将打开粘性查询参数模板页面。 stickyqueryparam.hbs文件包含以下代码 -

<h2>My Page</h2>
{{link-to 'Show' (query-params showThing=true)}}
{{link-to 'Hide' (query-params showThing=false)}}
<br>
{{#if showThing}}
   <b>Welcome to xnip..</b>
{{/if}}
{{outlet}}

现在打开在app/controllers /下创建的stickyqueryparam.js文件，代码如下 -

import Ember from 'ember';
export default Ember.Controller.extend ({
   queryParams: ['showThing'],
   //showThing would be false, if only the route's model is changing
   showThing: false
});

输出 (Output)

运行ember服务器，您将收到以下输出 -

当您单击该链接时，它将通过提供Show和Hide链接打开粘性查询参数模板页面 -

当您单击“ Show链接时，它将显示文本，“ Hide链接会隐藏文本 -