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>
    

Another example using $.getJSON instead of requirejs is:

<div data-bind='page: {id: 'one', withOnShow: "$root.loadData(\"one\")"}'>
  <span data-bind='text: $data'>
</div>

<script type="text/javascript">
    viewModel = {
        loadData: function(id) {
            return function(callback) {
                $.getJSON(urlFor(id), function(data) {
                    callback(data);
                }
            }
        }
    }
</script>