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实现的，所以你在vm中创建了类似的isLoading observable，你在异步调用之前设置为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>

Answer 2

我想将Pacejs集成到durandal导航中，由于router.isNavigating

，它最终变得非常简单

这是要点https://gist.github.com/volak/4aca442373b4216a52b5

使用承诺时，Durandal启动画面

2 个答案: