Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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 - </p> <p>The splash displays on your screen until Durandal loads up the application and replaces the div with <code>id="applicationHost"</code> '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 <code>Html.Partial</code> view that is being loaded and create your own view inside of your <code>app</code> folder in your Durandal project.</p> <p>For example you would create a new HTML view inside of your app folder -</p> <p><strong>splashpage.html</strong></p> <pre><code>&lt;div class="splash"&gt; &lt;div class="message"&gt; My app &lt;/div&gt; &lt;i class="icon-spinner icon-2x icon-spin active"&gt;&lt;/i&gt; &lt;/div&gt; </code></pre> <p>And then compose it from your <strong>shell</strong> - </p> <pre><code>&lt;div data-bind="if: showSplash"&gt; &lt;!-- ko compose: 'splashpage.html' --&gt; &lt;!-- /ko --&gt; &lt;/div&gt; </code></pre> <p>And in your <strong>view model</strong> you would toggle the observable showSplash whenever you want to show / hide it - </p> <pre><code>var showSplash = ko.observable(false); var shell = { showSplash: showSplash }; return shell; </code></pre> <p>And you could call that from your activate methods inside your other <strong>view models</strong> like this - </p> <pre><code>define(['shell'], function (shell) { function activate() { shell.showSplash(true); // do something shell.showSplash(false); } }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload