首页 文章

将查询参数传递给组件EmberJS

提问于
浏览 次
2

我现在有一个路由的大量查询参数，我有一个驻留在路由模板中的组件 .

我希望我的查询参数在组件内部更改时得到更新，因此我通过组件传递查询参数，如：

{{comp-name query_param1=query_param1 ... query_param=query_param20 }}

我目前更新组件中的查询参数：

{{input value=query_param_x}}

然而，由于我将传递20个参数，这很快就会变得乏味而且压倒性的很长 . 有没有办法让这更简洁？

注意：我正在开发的应用程序是在Ember 1.12上，而不是使用ember-data .

javascript ember.js

2 回答

  • 2

    您可以创建一个包含所有参数的对象，类似于：

    params = {
    query_param1,
    query_param2,
    ...
}

    传入params对象而不是每个单独的param：

    {{comp-name params=params}}

    此外，尝试考虑组件是否真的需要那么多参数 . 有没有办法将其分解为更复杂，更小的组件等 .

    回复于
  • 1

    另一种方法是不在组件与其主机控制器/路由器之间共享queryParameters . 将组件查询行为与路由的查询行为分离 . 您不需要这些东西进行交互 . 组件不需要与父级共享查询参数 . 我想你想要分享的是 DS.Store 的一个实例 .

    通过将引用传递给商店（奖励点指向使用服务公开它的渴望Emberinos），可以对独立于路由器的组件执行查询 . 这样，商店将能够优先化/编组批量请求 .

    这是一个实现此模式的mixin示例 . store 只是通过以下方式从控制器传递给组件： {{foo store=store}}

    Ember.Mixin.Create({
  actions: {
    // @params q Hash
    query(q){
    // #beforeModel just imitates the semantics of the route events  
    let [store,query] = [this.get('store'),this.beforeModel(q)];
    let p = store.query(query).then(function(results){
      this.set('results', this.afterModel(query, results));
      this.rerender();
    }.bind(this)).catch(function(error){
      this.handleError(error);
      this.rerender();
    }.bind(this));
    this.set('p', p); // P observers fire as it transitions
  } 
})
    回复于

相关问题