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

【问题标题】：Durandal: Showing a 'LOADING...' during compositionDurandal：在合成过程中显示“正在加载...”
【发布时间】：2013-12-27 00:00:50
【问题描述】：

在 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

【问题讨论】：

标签： durandal durandal-2.0

【解决方案1】：

这要求评论“您尝试过什么？”但鉴于我可以看到这对未来用户的好处，我想投入 0.02 美元 -

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

例如，您将在应用文件夹中创建一个新的 HTML 视图 -

splashpage.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);
    }

});

【讨论】：

也许我对“启动画面”一词的使用不是最佳选择。这个特殊的组合只是我应用程序的一小部分。 “父”视图模型不是外壳，并且这些父视图模型也将不止一个。无论如何，让子视图模型负责这种行为似乎并不合适。
同样的基本方法适用——您只想从其他区域而不是从子视图模型中调用它。我的代码旨在成为伪代码，以帮助您提出适用于您的应用程序的解决方案。
我认为这是一个合理的解决方案。将显示/隐藏逻辑抽象为“基本”视图模型怎么样？这样，应用程序逻辑就不必关心这个功能。
同意，这是合理的。希望能添加原生支持，这样孩子们就不需要实现任何特殊行为来实现它。

【解决方案2】：

这听起来像是自定义transition 可能有用的场景。当组合机制切换节点进出 DOM 时，它可以使用转换。

此页面，在 Additional Settings>Transition（大约一半）下描述了一个自定义转换：http://durandaljs.com/documentation/Using-Composition/

【讨论】：

在激活完成后会开始过渡吗？我需要在激活工作时发生这种情况。
我同意@Joseph Gabriel 的观点，这听起来像是自定义过渡的一个很好的用例。看看gist.github.com/jstott/6326038，它基于 Evan Larsen 为 Durandal 1.2 最初的 CSS3 过渡。此外，我可能会选择一个在换出视图时激活的加载指示器。
@ShaunRowan - 你是对的。激活完成后开始转换。我不确定我是否理解这种行为背后的原因——似乎过渡会在流程的早期开始——而不是在页面完全激活之后。我会再调查一下 - 也许我缺少一些东西。
@JosephGabriel 你能把你的发现也添加到github.com/BlueSpire/Durandal/issues/414吗？