Question

我现在有大量的路由查询参数，我有一个组件位于路径的模板中。

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

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

我目前使用以下命令更新组件中的查询参数：

{{input value=query_param_x}}

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

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

Answer 1

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

params = {
    query_param1,
    query_param2,
    ...
}

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

{{comp-name params=params}}

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

Answer 2

另一种方法是不在组件与其主机控制器/路由器之间共享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
  } 
})

将查询参数传递给组件EmberJS

2 个答案: