Durandal: Showing a 'LOADING…' during composition

Question

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

        

            <         


        
                      

              相关标签:
       
      

Answer 1

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 -

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.

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>

And then compose it from your shell -

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

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

});

Answer 2

This sounds to me like a scenario where a custom transition may be useful. When the composition mechanism switches nodes in and out of the DOM, it can use a transition.

This page, under Additional Settings>Transition (about halfway down) describes a custom transition: http://durandaljs.com/documentation/Using-Composition/