2016-05-17 26 views
4

我是emberjs的初学者,我想访问组件中的url参数,但不知道它是如何在ember js中完成的。我怎样才能在emberjs组件中获取url参数

我能得到网址参数的路线与下面的代码:

model(params) { 
    this.store.query('ticket', { 
     page: { 
      number: params.page, 
      size: params.size 
     } 
    }); 
}, 

queryParams: { 
    page: { 
     refreshModel: true 
    }, 
    size: { 
     refreshModel: true 
    } 
} 

回答

7

简单的回答:

您可以将路由器注入到你需要像这样的组件:

import Ember from 'ember'; 

const { computed: { alias }, observer } = Ember 

export default Ember.Component.extend({ 
    routing: Ember.inject.service('-routing'), 
    params: alias('routing.router.currentState.routerJsState.fullQueryParams') 
}) 

这是一个twiddle与此实现。

较长的答案:

您使用的是注入的路由是私有的,并使用routerJsState.fullQueryParams一样,是不是真正的标准做法。

因为查询参数实际上是某处的某个属性,所以如果您可以使某个服务“某处”更好,那么您可以将该服务注入到组件中,而不是像我们现在这样进行路由。例如,页面和限制可以存在于服务中,并被注入到控制器和组件中,并且是更好的解决方案。

这里是that solution in a twiddle

相关的代码:

services/task-pager.js 
import Ember from 'ember'; 

export default Ember.Service.extend({ 
page: 0, 
limit: 3, 
nextPage: function() { 
    this.set('page',this.get('page') + 1) 
    console.log(this.get('page')) 
    }, 
    previousPage: function() { 
    this.set('page',this.get('page') - 1) 
    } 
}) 

// controllers/tasks.js 
export default Ember.Controller.extend({ 

taskPager: Ember.inject.service(), 

queryParams:['page', 'limit'], 

page: Ember.computed.alias('taskPager.page'), 

limit: Ember.computed.alias('taskPager.limit'), 

actions: { 
    nextPage: function() { 
    this.get('taskPager').nextPage() 
    }, 
    previousPage: function() { 
    this.get('taskPager').previousPage() 
    } 
} 
}) 

//components/display-qp.js 
export default Ember.Component.extend({ 
    params: Ember.inject.service('task-pager') 
}) 

//templates/components/display-qp.hbs 
COMPONENT PARAMS PAGE:{{params.page}}