javascript - 如何根据 ember.js Controller 中的 ajax 响应显示或隐藏微调器？

Question

我已经为一个按钮设置了一个 emberjs Action ，这样，每当用户单击该按钮时，我都需要将用户导航到一个新页面。在进行转换之前，我需要进行几次 api 调用，并根据 api 调用的结果将用户转换到一个新页面。我对基于结果的转换没有任何问题，但在这些 api 调用期间我无法显示微调器图像。

在例子中here我使用 setTimeout 方法来延迟转换，因为我无法公开 api。在那里我可以看到控制台日志是按顺序打印的；但我在超时期间看不到微调器。任何帮助将不胜感激。提前致谢。

Answer 1

使用RSVP Promises等待所有 API 查询完成:

App.IndexController = Ember.Controller.extend({
  actions: {
    'goToFoo': function(){
      var Indexcontroller = this;
      showSpinner();

      Ember.RSVP.all(promisesArray).then(function(resultsArray) {
         hideSpinner();
         Indexcontroller.transitionToRoute('foo');
      }, function(error) {
         ...handle errors
      });
    }
  }
});

ajax 请求将返回一个 promise，因此您可以在一个数组中对它们进行批处理并将其传递给 RSVP.all 方法。 resultsArray 将按顺序包含每个 ajax 调用的结果。如果任何响应产生错误，将调用错误函数。