Close #24 - load content using custom method

README.md

@@ -413,36 +413,60 @@ The source code is documented using JsDoc.
     </div>
 
 
-## In the pipeline
-
-
 ### Should be possible to react to a failed navigation
 
 Both Page-objects and pager should send events whenever a navigation failed (i.e. no matching page for the route).
 
+    <a data-bind="click: function() { window.location.hash = 'failed_navigation/random/' + (Math.random()*1000).toFixed() }">
+        Go to random sub-page
+    </a>
 
+    <div data-bind="page: {id: 'random', navigationFailed: randomFailed}">
+        <ul class="nav nav-tabs" data-bind="foreach: $page.children">
+            <li data-bind="css: {active: isVisible}"><a
+                    data-bind="text: getId(), page-href: getId()"></a></li>
+        </ul>
 
-## Backlog
+        <div data-bind="foreach: newChildren">
+            <div data-bind="page: {id: childId}">
+                <span data-bind="text: childId"></span>
+            </div>
+        </div>
+    </div>
+
+where
+
+    randomFailed:function (page, route) {
+        viewModel.newChildren.push({
+            childId:route[0]
+        });
+        page.showPage(route);
+    },
+    newChildren:ko.observableArray([])
+
+
+## In the pipeline
 
-There are a lot of features waiting to be implemented. Here are some of them.
 
 ### Should be possible to load view content using a custom method
 
 In order to facilitate programming in the large it is useful to be able to extract views as separate components.
 These views should not be forced to be stored as html-fragments or be loaded with jQuery.
 
-Thus a way to inject custom views should be possible. This is done using the `sourcer`-property.
+Thus a way to inject custom views should be possible. This is done using the `source`- or
+`sourceOnShow`-properties. Just supply a method instead of a string!
 
-The `sourcer`-property takes a method that should take a `pager.Page` as first argument and return nothing.
+These properties takes a method that should take a `pager.Page` as first argument, a callback, and return nothing.
 
-    <div data-bind="page: {id: 'zoidberg', sourcer: view('character/zoidberg')}" />
+    <div data-bind="page: {id: 'zoidberg', sourceOnShow: requireView('character/zoidberg')}" />
 
 where
 
-    window.view = function(viewModule) {
-      return function(page) {
-        require(viewModule, function(viewString) {
+    window.requireView = function(viewModule) {
+      return function(page, callback) {
+        require([viewModule], function(viewString) {
           $(page.element).html(viewString);
+          callback();
         });
       };
     };
@@ -451,9 +475,14 @@ if
 
     // file: character/zoidberg.js
     define(function() {
-      return '<h1>Zoidberg</h1>;
+      return '<h1>Zoidberg</h1>';
     });
 
+## Backlog
+
+There are a lot of features waiting to be implemented. Here are some of them.
+
+
 ### Should be possible to send URI (fragment identifier) parameters to a page
 
 A page should be able to access the information in the current route - changing a view-model.

demo/character/zoidberg.js

@@ -0,0 +1,3 @@
+define(function() {
+    return '<h1>Zoidberg</h1>';
+});

demo/demo.js

@@ -47,6 +47,16 @@ require(['jquery', 'knockout', 'underscore', 'pager', 'bootstrap'], function ($,
         };
     };
 
+    window.requireView = function(viewModule) {
+        return function(page, callback) {
+            require([viewModule], function(viewString) {
+                $(page.element).html(viewString);
+                callback();
+            });
+        };
+    };
+
+
     $(function () {
 
         pager.extendWithPage(viewModel);

demo/index.html

@@ -19,7 +19,8 @@
                 underscore:'lodash.min',
                 knockout:'knockout-2.1.0',
                 pager:'pager.amd.min',
-                bootstrap:'bootstrap/js/bootstrap.min'
+                bootstrap:'bootstrap/js/bootstrap.min',
+                "zoidberg":'character/zoidberg'
             }
         });
     </script>
@@ -979,6 +980,49 @@ <h1>Reacting to Failed Navigations</h1>
 newChildren:ko.observableArray([])
     </pre>
 
+    <a href="#custom_view_loader">Read about loading a view using a custom method</a>
+
+</div>
+
+<div data-bind="page: {id: 'custom_view_loader', title: 'Load View using Custom Method'}">
+    <header class="jumbotron subhead">
+        <h1>Load View using Custom Method</h1>
+
+        <p class="lead">
+            In order to facilitate programming in the large it is useful to be able to extract views as separate
+            components.
+            These views should not be forced to be stored as html-fragments or be loaded with jQuery.
+            <br/>
+            Thus a way to inject custom views should be possible. This is done using the <code>source</code>- or
+            <code>sourceOnShow</code>-properties. Just supply a method instead of a string!
+            <br/>
+            These properties takes a method that should take a <code>pager.Page</code> as first argument, a callback,
+            and return nothing.
+        </p>
+    </header>
+
+    <a href="#custom_view_loader/zoidberg">Load custom view using requireView-method</a>
+
+    <div data-bind="page: {id: 'zoidberg', sourceOnShow: requireView('zoidberg')}">
+
+    </div>
+
+    <pre class="prettyprint linenums">
+&lt;div data-bind="page: {id: 'zoidberg', sourceOnShow: requireView('zoidberg')}"/&gt;        
+    </pre>
+
+    where
+
+    <pre class="prettyprint linenums">
+window.requireView = function(viewModule) {
+    return function(page, callback) {
+        require([viewModule], function(viewString) {
+            $(page.element).html(viewString);
+            callback();
+        });
+    };
+};
+    </pre>
 
 </div>