Change Binding Context on Show

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.

Show page and lazy load view model

Hide this page
<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>