粘性查询参数值(Sticky Query Param Values)
优质
小牛编辑
130浏览
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链接会隐藏文本 -