Async Click

The web is asynchronous. Being able to handle this in a SPA is important. Using $page.async(Function,String/Page,[String/Page],[Observable]) makes it trivial in your SPA.

The function $page.async got some interesting conditions.

In this example we got two buttons (one will be resolve and one will be rejected). For brevity only one buttons model and markup is presented.

viewModel = {
    // wait 2 secs before returning ok
    wait2: function() {
      var d = $.Deferred();
      setTimeout(function() {
        d.resolve();
      }, 2000);
      return d;
    },
    okIsLoading:ko.observable()
};

and the markup

<a class="btn" data-bind="click: $page.async(wait2,'ok','notok',okIsLoading)">
    Show OK page after 2 secs
    <!-- ko if: (okIsLoading() == 'pending') -->
    <img src="small-ajax-loader.gif"/>
    <!-- /ko -->
</a>

Click on both buttons.

Show OK page after 2 secs

Show NOT OK page after 2 secs

OK Page

The hash is now changed to #!/navigation/async/ok.

Not OK Page

The hash is now changed to #!/navigation/async/notok.


Tip!

This page is loaded using the code
        <div data-bind="page: {
          id: 'async',
          withOnShow:  requireVM('vm/navigation/async'),
          title: 'Async',
          desc: 'handling asynchronous navigation',
          scrollToTop: true,
          sourceCache:  true,
          sourceOnShow: 'page/navigation/async.html'
        }"></div>