When constructing an application with multiple pages, you might want to delay data binding
the pages until they are first displayed.
Use withOnShow:
to asynchronously data bind a page when it is first displayed.
<div data-bind="page: {id: 'start'}"> <p> <a class="btn" data-bind="page-href: '../invention'">Show page and lazy load view model</a> </p> </div> <div class="well" data-bind="page: {id: 'invention', withOnShow: requireVM('invention')}"> <h3 data-bind="text: name"></h3> <p data-bind="text: description"></p> <a data-bind="page-href: '../'">Hide this page</a> </div> <script type="text/javascript> var requireVM = function (module) { return function (callback) { require([module], function (mod) { callback(mod.getVM()); }); }; }; </script>