Durandal：在合成过程中显示“正在加载...”

当 activate 方法执行其操作时，我可以轻松地显示加载消息，如下所示：

        <div data-bind="compose:ActiveVm">
            <div class="text-center" style="margin : 75px">
                <i class="fa fa-spinner fa-spin"></i>
            </div>
        </div>

但是，如果我随后使用不同的视图模型更新 ActiveVm 属性，则不会显示启动内容。我知道启动内容仅设计为在“初始”加载时显示，但是当从一个视图模型转换到另一个视图模型时，我有哪些选项可以显示此类消息？

请注意，此组合不参与路由...

更新：此处相关的 durandal 问题可能对未来的访问者有价值：https://github.com/BlueSpire/Durandal/issues/414

这就需要评论“你尝试过什么？”但考虑到我可以看到这对未来用户的好处，我想投入 0.02 美元 -

启动画面会显示在屏幕上，直到 Durandal 加载应用程序并将 div 替换为id="applicationHost"的内容包含 shell 视图和加载的后续视图。如果你想让它成为一个可重用的组件，你可以做的一件事就是采用Html.Partial正在加载的视图并在您的内部创建您自己的视图appDurandal 项目中的文件夹。

例如，您可以在应用程序文件夹内创建一个新的 HTML 视图 -

启动页.html

<div class="splash">
    <div class="message">
        My app
    </div>
    <i class="icon-spinner icon-2x icon-spin active"></i>
</div>

然后从你的shell -

<div data-bind="if: showSplash">
    <!-- ko compose: 'splashpage.html' -->
    <!-- /ko -->
</div>

而在你的查看模型每当你想显示/隐藏它时，你都可以切换可观察的 showSplash -

var showSplash = ko.observable(false);

var shell = {
    showSplash: showSplash
};
return shell;

您可以从其他方法中的激活方法中调用它查看模型像这样 -

define(['shell'], function (shell) {

    function activate() {
        shell.showSplash(true);
        // do something
        shell.showSplash(false);
    }

});