6

我的基于 durandal 的 SPA 在视图模型的激活函数中进行了各种异步 ajax 调用。我正在使用激活函数中的 Q 返回一个承诺。

 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 秒内停留在原来的位置。

我的启动画面很简单，并且在网站第一次加载时会显示。有任何想法吗？

4

2 回答 2

4

假设您的启动画面看起来与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 中创建类似的isLoadingobservable，您在异步调用之前将其设置为 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>
于 2013-05-30T13:10:56.080 回答
1

我想将Pacejs集成到 durandal 导航中，由于 router.isNavigating，它最终变得非常容易

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

于 2014-10-21T08:18:35.313 回答