-1

我有一个“盒子”路线/控制器，如下所示；

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”钩子，即在“activate”钩子之前。是因为模板中指定了“gridParas”吗？

  2. 当我为 /myService1 执行 this.doPost() 时，它必须是“同步”请求，否则执行流程会发生变化，我会收到错误消息。实际上，我希望仅在收到响应后才执行 filterCols() 控制器中的代码，即 this.set('gridVals.layout', this.get('layouts')[this.get('type')])来自 /myService1。但是，到目前为止，我必须使用“同步”请求来执行此操作，否则使用“异步”，执行将移至 filterCols()，并且由于我还没有响应，因此会引发错误。

补充一下，我使用的是 Ember v 2.0

4

2 回答 2

2
  1. activate()on the route在,和hooks...之后触发，因为这 3 个 hooks 被认为是“验证阶段”（它决定了路由是否会完全解析）。需要明确的是，这个路由挂钩与在您的模板中使用无关......它与您的模型挂钩中的调用有关。beforeModelmodelafterModelgridParasget('gridParas')
  2. 我不清楚你doPost()的其余代码在哪里连接......但是因为它返回一个promise你可以附加的对象，then()这将允许你基本上等待承诺响应，然后在你的其余部分使用它代码。

简单示例：

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

如果您可以将您的问题简化为更清晰和简洁，我可以提供更多信息

于 2016-01-19T16:48:17.457 回答
0

一般来说，在这个级别你应该解释你想要归档的内容，而不仅仅是询问它是如何工作的，因为我认为你与框架进行了很多斗争！

但我从你的评论中删除了这一点。

首先，您不需要 doPost 方法！jQuerys$.ajax返回一个 thenable，可以用Ember.RSVP.resolve!

下一步：如果你想在实际渲染任何东西之前获取数据，你应该在model钩子中这样做！

我不确定您是否要 fetch /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
  });
});

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

于 2016-01-27T23:19:00.743 回答