EmberJS - 路由器粘性查询参数值

更新于 2025/12/29 11:37:17

在 Ember 中，查询参数值默认是粘性的；这样，对查询参数所做的任何更改，都会通过重新输入路由来保留查询参数的新值。

语法

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

示例

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

import Ember from 'ember';
//以变量形式访问 Ember.js 库 Ember
import config from './config/environment';
//它以变量形式提供对应用程序配置数据的访问 config

//const 声明只读变量
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

//定义以参数为对象来创建路由的 URL 映射
Router.map(function() {
    this.route('stickyqueryparam');
});

//它指定可供应用程序其他部分使用的 Router 变量
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 Tutorialspoint..</b>
{{/if}}
{{outlet}}

现在使用以下代码打开在 app/controllers/ 下创建的 stickyqueryparam.js 文件 −

import Ember from 'ember';

export default Ember.Controller.extend ({
   queryParams: ['showThing'],
   //如果只有路线的模型发生变化，则 showThing 为 false
   showThing: false
});