杜兰达(Durandal):创作期间显示“正在加载..." [英] Durandal: Showing a 'LOADING...' during composition

问题描述

当activate方法正在执行以下操作时，我可以轻松显示加载消息:

I can easily show a loading message while the activate method is doing its thing like so:

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

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

However if I then update my ActiveVm property with a different viewmodel, the splash content does not show. I understand that the splash content is only designed to show on 'initial' load, but what options do I have for displaying such a message when transitioning from one viewmodel to another?

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

Note that this composition does not participate in routing...

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

Update: Related durandal issue here which might be of value to future visitors: https://github.com/BlueSpire/Durandal/issues/414

推荐答案

这是对您尝试了什么?"的评论.但是鉴于我可以为将来的用户看到此好处，所以我想投入0.02美元-

This begs for a comment of 'what have you tried?' but given that I could see the benefit of this for future users I wanted to throw in my $0.02 -

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

The splash displays on your screen until Durandal loads up the application and replaces the div with id="applicationHost" 's content with the shell view and the subsequent views that are loaded. If you wanted to make this a re-usable component one thing that you could do is to take that Html.Partial view that is being loaded and create your own view inside of your app folder in your Durandal project.

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

For example you would create a new HTML view inside of your app folder -

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-

And in your view model you would toggle the observable showSplash whenever you want to show / hide it -

var showSplash = ko.observable(false);

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

您可以通过其他视图模型中的激活方法调用该代码-

And you could call that from your activate methods inside your other view models like this -

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

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

});

这篇关于杜兰达(Durandal):创作期间显示“正在加载..."的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！