StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The easiest thing to do would be to add an observable called something like <code>isUserLoaded</code> on your view model. Then, apply an <code>if</code> binding around the content section:</p> <pre><code><div> <header id="nav" data-bind="compose: 'viewmodels/nav', activate: false"> </header>  <section id="content" class="main container-fluid" data-bind="router: { transition: 'entrance' }, activate: false" style="overflow: auto"> </section>  <footer>  </footer> </div> </code></pre> <p>Once you've loaded the user, you can update the observable to <code>true</code> and your content binding should fire.</p> <p><strong>Edit</strong></p> <p>If that does't work it sounds like your router must still be resolving the content view model (which may point to a routing problem? Hard to say without seeing your entire solution).</p> <p>Anyway, if its not a routing issue, then you could employ a solution where your content model returns an unresolved promise from its activate method; then resolve that promise when the user is loaded. For example, something along these lines:</p> <p>userModel.js:</p> <pre><code>define([], function () { // single instance to track the loaded user var userModel = { selectedUser: ko.observable() }; return userModel; }); </code></pre> <p>navModel.js:</p> <pre><code>define(["dataService", "userModel"], function(dataService, userModel) { // view model for the nav bar var navModel = { // model definition }; // load the user navModel.activate = function() { return dataService.getUsers().then(function(response) { // Push the user to the userModel userModel.selectedUser(response.user); }); }; return navModel; }); </code></pre> <p>contentModel.js:</p> <pre><code>define(["userModel"], function (userModel) { var contentModel = { // model definition }; contentModel.activate = function () { // Prevent activation until user is resolved var deferred = $.Deferred(); var subscription = userModel.selectedUser.subscribe(function (user) { if (!user) return; subscription.dispose(); deferred.resolve(); }); return deferred.promise(); }; return contentModel; }); </code></pre> <p>If you don't want to use an observable for the <code>userModel.selectedUser</code> property, you could instead use another deferred, or fire an event when the user is loaded, etc etc. Whatever floats your boat!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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