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

如果这对你没有帮助（我真的认为这应该能解决你的问题），请描述你的问题。