Question

我为按钮设置了一个emberjs动作，这样，只要用户点击该按钮，我就需要将用户导航到新页面。在进行转换之前，我需要进行几次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调用的结果。如果任何响应产生错误，将调用错误函数。

Answer 2

在您提供的示例中，您在致电hideSpinner后致电setTimeout，之后呼叫您的showSpinner功能。由于执行这3个函数调用只需要很短的时间，你甚至不会注意到微调器出现，因为微调器几乎是瞬间隐藏的。

您需要做的是在控制器上调用hideSpinner后立即在回调函数中调用transitionToRoute。

修改
根据@ buuda的建议和new example，我提出了this。

这基本上是@buuda所说的，创建一个基于AJAX调用将被解析/拒绝的promise对象，并将该对象存储到一个数组中，并将该数组传递给Ember.RSVP.all()。

Answer 3

尝试使用jquery。也许在屏幕上隐藏元素并在进行这些api调用时显示加载指示符？

$("loading_indicator").show()
$.ajax({
    type: "POST",
    url: url,
    success: function(xhr,test){
        $("loading_indicator").hide()
    }
})

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

3 个答案: