使用承诺时,Durandal启动画面

Question

我的基于durandal的SPA在viewmodels的activate函数中进行各种异步ajax调用.我正在使用来自activate函数的Q返回一个promise.

 function activate(){
      return Q.fcall(['getPersons', 'getAgenda']);
 }

 function getPersons(){
      var defer = Q.defer();
      $.ajax({
         //omitting most of the settings
         success: function(data){
              defer.resolve(data);
         },
         error: function(xhr, status){
              defer.reject(status);
         }
      });

     return defer.promise; 
 }

getAgenda函数中也存在类似的代码.所有这一切都很好,我的屏幕转换.麻烦的是,我的getAgenda需要一段时间(2到3秒).没有出现闪屏,屏幕在转换之前保持2或3秒的位置.

我的启动画面很简单,并且确实显示了网站第一次加载.有任何想法吗？

Answer 1

假设您的启动屏幕看起来类似于http://durandaljs.com/documentation/Adding-a-Splash-Screen，那么这意味着一次性启动屏幕会在app.start.

<div id="applicationHost">
    <div class="splash">
        <div class="message">
            Durandal Starter Kit
        </div>
        <i class="icon-spinner icon-2x icon-spin active"></i>
    </div>
</div>

您可能正在寻找某种加载指示器。例如，在示例中，这是基于 实现的router.isNavigating，因此在虚拟机中创建类似的isLoading可观察量，在异步调用之前将其设置为 true ，完成后设置为 false 。

https://github.com/dFiddle/dFiddle-1.2/blob/gh-pages/App/samples/shell.html#L13

<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
    <i class="icon-spinner icon-2x icon-spin"></i>
</div>