Durandal:在撰写过程中显示 'LOADING...'

Question

我可以很容易地在activate方法执行如下操作时显示加载消息:

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

但是，如果我随后使用其他 View 模型更新ActiveVm属性，则不会显示初始内容。我知道初始内容仅设计为在“初始”负载下显示，但是从一个 View 模型转换到另一个 View 模型时，我有什么选择来显示这样的消息？

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

更新:这里的相关durandal问题可能对将来的访问者有值(value): https://github.com/BlueSpire/Durandal/issues/414

Answer 1

这就引出了“您尝试了什么？”的评论。但鉴于我可以为将来的用户看到此好处，因此我想投入0.02美元-

启动画面会显示在屏幕上，直到Durandal加载应用程序，然后将div用id="applicationHost"的内容替换为shell View 和随后加载的 View 。如果要使其成为可重用的组件，您可以做的一件事情是获取正在加载的Html.Partial View ，并在Durandal项目的app文件夹内创建自己的 View 。

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

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>

在 View 模型中，只要您要显示/隐藏它，就可以切换可见的showSplash-

var showSplash = ko.observable(false);

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

您可以像这样在其他 View 模型内部的激活方法中调用该方法-

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

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

});