將查詢參數傳遞到組件EmberJS

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的對象，類似這樣的東西：

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 
    } 
})