Durandal 在着陆页上延迟构图？答案

【问题标题】：Durandal delayed composition on landing page?Durandal 在着陆页上延迟构图？
【发布时间】：2013-12-15 07:25:34
【问题描述】：

我一直在将 Durandal 用于各种登录页面，并使用它来填充页面的主要内容（#applicationHost，下面的红色区域）。它可以工作，但页面渲染速度是个问题（requirejs、ajax 调用、组合等）

由于我们已经有了内容数据，我们正在考虑在服务器端渲染页面内容。

但是，我们仍然希望在此页面上使用 Durandal 以允许对其他视图进行哈希路由、触发 Durandal 对话框以及数据绑定一些可以异步加载的 observable。（下方绿色区域）

问题是我不想在此登录页面上启动 Durandal 时立即替换 #applicationHost 内容（上图红色）。对于到其他视图的哈希路由，我想替换或隐藏它。

【问题讨论】：

标签： durandal

【解决方案1】：

不确定您要问什么，但听起来这至少可以解决部分问题。

您可以使用“承诺”来强制在初始屏幕加载和您的应用执行所需的任何启动之间的最小延迟。假设你的 Durandal main.js 在启动时加载 shell.js 的常见设置，从 shell.js 'activate' 回调返回一个组合的承诺。我建议使用 Q 库来实现 promise (Q + Durandal docs).

shell.js 将包含以下内容。下面的逻辑导致启动屏幕显示至少 3 秒。如果 initializeAppPromise 花费的时间超过 3 秒，则更长：

in shell.js...

activate = function(){

    var initializeAppPromise = router.map(....)..etc...activate();

    var minimumDelayPromise = Q.delay(3000); //give splash animation/whatever time to display

    return Q.all([initializeAppPromise, minimumDelayPromise ])
            .spread(function(routerActivationResponse){
                 return routerActivationResponse;
             });
    }

【讨论】：

【解决方案2】：

为此想出了一个不错的解决方案，希望对其他人有所帮助：

https://github.com/bestguy/durandal-delayed-composition

【讨论】：