Durandal:在作曲中表现出'加载......'

Question

我可以轻松地显示加载消息,而activate方法正在这样做:

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

但是,如果我然后使用不同的viewmodel更新我的ActiveVm属性,则不会显示启动内容.我知道启动内容仅用于显示"初始"加载,但在从一个视图模型转换到另一个视图模型时,我有什么选项可用于显示此类消息？

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

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

Answer 1

这引起了对"你试过了什么？"的评论.但考虑到我可以看到这对未来用户的好处,我想投入我的0.02美元 -

在Durandal加载应用程序并使用id="applicationHost"shell视图和后续加载的视图替换div 的内容之前,会在屏幕上显示启动画面.如果你想让它成为一个可重复使用的组件,你可以做的就是获取Html.Partial正在加载的视图,并app在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);
    }

});

Answer 2

这听起来像是一个习惯transition可能有用的场景.当组合机制将节点切换进出DOM时,它可以使用转换.

此页面在"其他设置">"过渡"(大约一半)下描述了自定义过渡:http: //durandaljs.com/documentation/Using-Composition/