ember.js - Ember 路由查询参数

Question

我想用查询参数打开一个新的视角。

这意味着在我的 index.hbs 中，我单击一个按钮从输入字段中获取值。之后，我将在我的案例 map View 中打开一条新路线，其路径为“/map”，查询参数如

localhost:4200/map/?search=xyz

当我在我的索引 Controller 中做的时候:

queryparams:['location'],
location:null,

在我的路线上

  actions:{
    search(location){
      this.transitionTo('map-view');
  }
}

我立即获得我的索引 url

/?location=xcyxyx

但我想在我的 map 路线上

localhost:4200/map/?search=xyz

Answer 1

在 index.js Controller 中定义 search 属性，将其用于 queryParams 值转换为 map-view路线。

索引.hbs

{{input value=search}}
<br />
<button {{action 'transitionToLocation'}}> Search</button>

controllers/index.js - 引用 transitionToRoute

import Ember from 'ember';
export default Ember.Controller.extend({
  search:'india',
  actions:{
    transitionToLocation(){
      this.transitionToRoute('map-view',{queryParams: {search: this.get('search')}});
    }
  }
});

routes/map-view.js
使用 refreshModel true 定义 queryParams search 然后这将强制触发 beforeModel 和 model 以及 afterModel Hook 搜索 属性更改。

import Ember from 'ember';
export default Ember.Route.extend({
  queryParams:{search: {refreshModel:true}},
});