Ember瞭解路由/控制器之間的執行流程

Question

我有一個如下所示的「盒子」路由/控制器;

export default Ember.Controller.extend({ 
    initialized: false, 
    type: 'P', 
    status: 'done', 
    layouts: null, 
    toggleFltr: null, 
    gridVals: Ember.computed.alias('model.gridParas'), 
    gridParas: Ember.computed('myServerPars', function() { 
     this.set('gridVals.serverParas', this.get('myServerPars')); 
     this.filterCols(); 

     if (!this.get('initialized')) { 
      this.toggleProperty('initialized'); 
     } else { 
      Ember.run.scheduleOnce('afterRender', this, this.refreshBox); 
     } 

     return this.get('gridVals'); 
    }), 
    filterCols: function() 
    { 
     this.set('gridVals.layout', this.get('layouts')[this.get('type')]); 
    }, 
    myServerPars: function() { 
     // Code to set serverParas 
     return serverParas; 
    }.property('type', 'status', 'toggleFltr'), 
    refreshBox: function(){ 
     // Code to trigger refresh grid 
    } 
}); 

我的路線看起來像;

export default Ember.Route.extend({ 
    selectedRows: '', 
    selectedCount: 0, 
    rawResponse: {}, 
    model: function() { 
     var compObj = {}; 
     compObj.gridParas = this.get('gridParas'); 
     return compObj; 
    }, 
    activate: function() { 
     var self = this; 
     self.layouts = {}; 

     var someData = {attr1:"I"}; 
     var promise = this.doPost(someData, '/myService1', false); // Sync request (Is there some way I can make this work using "async") 
     promise.then(function(response) {  
      // Code to use response & set self.layouts 
      self.controllerFor(self.routeName).set('layouts', self.layouts); 
     }); 
    }, 
    gridParas: function() { 
     var self = this; 
     var returnObj = {}; 
     returnObj.url = '/myService2'; 
     returnObj.beforeLoadComplete = function(records) {   
      // Code to use response & set records 
      return records; 
     }; 
     return returnObj; 
    }.property(), 
    actions: {  
    } 
}); 

我的模板看起來像

{{my-grid params=this.gridParas elementId='myGrid'}} 

我doPost方法看起來像下面;

doPost: function(postData, requestUrl, isAsync){ 
    requestUrl = this.getURL(requestUrl); 
    isAsync = (isAsync == undefined) ? true : isAsync; 
    var promise = new Ember.RSVP.Promise(function(resolve, reject) { 
     return $.ajax({ 
      // settings 
     }).success(resolve).error(reject); 

    }); 
    return promise; 
    } 

鑑於上述設置，我想了解執行的（用於不同的鉤即）流/序列。 我正在嘗試調試，並且從一個類跳到另一個類。 另外，2個具體問題;

1. 我期待「激活」鉤最初將被解僱，但發現事實並非如此。它首先執行「gridParas」鉤子 ，即在「激活」鉤子之前。是否因爲模板中指定的「gridParas」 ？

2. 當我爲/ myService1執行this.doPost（）時，它必須是「同步」請求，否則執行流將更改，並且出現錯誤。 其實我想filterCols（）控制器內的代碼 this.set（'gridVals.layout'，this.get（'layouts'）[this.get（'type'）]）到 只能在響應後執行已從 /myService1收到。但是，到目前爲止，我必須使用「同步」請求來執行 ，否則使用「異步」執行將移至filterCols（）和 ，因爲我還沒有響應，它會引發錯誤。

我想補充，我使用的灰燼2.0版

Answer 1

1. activate()的路線上被觸發後的beforeModel，model和afterModel掛鉤......因爲那些3個掛鉤被認爲是「驗證階段」（確定路線是否完全解決）。清楚的是，這個路由鉤與你的模板中使用gridParas無關......它與你的模型鉤子中的調用get('gridParas')有關。
2. 我不清楚doPost()在哪裏與代碼的其餘部分相連......但是因爲它返回promise對象，所以您可以在then()上使用這個對象，這將允許您基本上等待承諾響應，然後使用它在你的代碼的其餘部分。

簡單的例子：

this.doPost().then((theResponse) => { 
    this.doSomethingWith(theResponse); 
}); 

如果你可以簡化你的問題更加簡潔明瞭，我也許能夠在這個級別提供更多信息

Answer 2

一般來說，你應該解釋一下你想要存檔，而不只是問問它是如何工作的，因爲我認爲你在框架上反對很多！

但我從你的評論中拿出這個。

首先，你不需要你的doPost方法！ jQuerys $.ajax返回一個可靠的，可以與Ember.RSVP.resolve解析爲承諾！

下一頁：如果你想在實際渲染任何東西之前獲取數據，你應該在model鉤子中執行此操作！

我不知道你是否想取/service1，然後用你的響應建立一個請求到/service2，或者你可以單獨獲取這兩個服務，然後用數據顯示你的數據（你的網格？）這兩項服務。因此，這裏有兩種方式：

---

如果你可以獲取這兩種服務獨立做在你的路由model鉤：

return Ember.RSVP.hash({ 
    service1: Ember.RSVP.resolve($.ajax(/*your request to /service1 with all data and params, may use query-params!*/).then(data => { 
    return data; // extract the data you need, may transform the response, etc. 
    }, 
    service2: Ember.RSVP.resolve($.ajax(/*your request to /service2 with all data and params, may use query-params!*/).then(data => { 
    return data; // extract the data you need, may transform the response, etc. 
    }, 
}); 

如果需要的/service1應對剛剛取/service2在您的模型鉤子中執行此操作：

return Ember.RSVP.resolve($.ajax(/*/service1*/)).then(service1 => { 
    return Ember.RSVP.resolve($.ajax(/*/service2*/)).then(service2 => { 
    return { 
     service1, 
     service2 
    }; // this object will then be available as `model` on your controller 
    }); 
}); 

如果這對你沒有幫助（我真的認爲這應該能解決你的問題），請描述你的問題。